angulartypescriptnebularngx-admin

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


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?


Solution

  • 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