How to pass data to Angular component using Nebular dialog Component?

Question

I'm trying to send my objectData from a componentA, to DialogComponent to edit object info.

ComponentA opens the dialog and passes the data like this:

export class ComponentA implements OnInit {
  constructor(private dialogService: NbDialogService) {}
  openDialog(data) {
    this.dialogService.open(DialogComponent, {
      context: {
        product: data,
      },
    });
  }
}

the Nebular DialogComponent its like:

export class DialogComponent implements OnInit {
  product: any; <--- the object that the dialogue will receive
  preSaleItem: any; <-- and turn into it, within the dialogue.

  constructor(
    private ref: NbDialogRef<DialogComponent>,
    private dataService: DataService,
  ) {
  }
  navigateToComponentB() { 
    this.dataService.data = this.preSaleItem;
    this.router.navigate(['/pages/componentB']);
    this.close();
  }

  close() {
    this.ref.close();
  }

in dialog will fill the preSaleItem with new information and sand to componentB.

I tried two ways to transfer the data, one was by service

 export class DataService {
  data: any;

  constructor() {
    console.log(this.data); <----- the return is undefined
  }

And nothing returns. I think the Nebular component Dialog is killing the scope.

My ComponentB that will receive the data is:

 export class ComponentB implements OnInit {

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.preSaleItem = this.dataService.data;
    console.log(this.preSaleItem); <----- return is the same of the service
  }
 }

Reinforcing information about the problem: I have a componentA that passes the product to the dialog and builds the preSaleItem that I mentioned earlier, and worked well.

After that, when the preSaleItem was built in the dialog, i need send it to componentB. But the way I thought, through the service does not work. :(

I tried not to go through the dialog, using componentA for service with an observable var for componentB, and it worked. But I need the data to go through the dialog.

What are the possible solutions?

Answer 1

I found a way to solve my problem via the angular route. I will put a simple code to demonstrate. Using state attribute.

export class DialogComponent implements OnInit {
  product: any; <--- the object that the dialogue will receive
  preSaleItem: any; <-- and transform, to move to componentB.

  constructor(private ref: NbDialogRef<DialogComponent>) {}

  navigateToOptionals() {
    this.fillPreSaleItem();
    this.router.navigate(['/pages/componentB', {
      state: {
        data: this.preSaleItem
      }
    });
    this.close();
  }

  close() {
    this.ref.close();
  }
}

how was it in my componentB

export class ComponentB implements OnInit {
  item: any;

  constructor() {}

  ngOnInit() {
    this.item = history.state.data;;
    console.log(this.item); <----- return my object that i want :)
  }
 }

I found this site that helped me a lot! https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255