Pass dynamic object key in mat-dialog angular

Question

I am using mat-dialog of angular material. Here is my code:

if(abc_name === name){
    const dialogRef = this.dialog.open(ViewAbcComponent, {
      panelClass: 'full-screen-dialog-container',
      data: {abc_name: this.abcDetails.item1[keyValue]}
    });
    dialogRef.afterClosed().subscribe((result) => {
      if(result){}
      console.log("ViewAbcComponent dialog closed", result);
    });
  }

In data: object I want tp pass dynamic abc_name value. Any idea how to achieve that?

Answer 1

You can create subject/BehaviorSubject in service and listen (subscribe) to that subject in your ViewAbcComponent component. as soon as your data changed you have to update data as subject.next(data); and you will get it in component. Subject example:

const subject = new Rx.Subject();
subject.next(1);
subject.subscribe(x => console.log(x));

BehaviorSubject example:

const subject = new Rx.BehaviorSubject(0);
subject.next(1);
subject.subscribe(x => console.log(x));

Elaborating : (as per request)

1.You have to add varible in your service lets say app.service.ts and add update method.

const subject = new Rx.Subject();

  updateSubject(data){
   subject.next(data)
  } 

2. in whichever component your data is changing you have to call this updateSubject method to update data. like this.appService.updateSubject(updatedData);

3. In ViewAbcComponent component you have subscribe it like

   this.appService.subject.subscribe(x => console.log("mydata",x));