How to pass data to a component when opening a material popup

Question

I have a component wrapper for popups (Angular Material MatDialog). In this component I am using ngComponentOutlet to dynamically display the children components.

popup-shell.component.html

<mat-dialog-content class="mat-typography popup-shell">
    <div class="popup-shell__container">
        <ng-container *ngComponentOutlet="data.component"></ng-container>
    </div>
</mat-dialog-content>

popup-shell.component.ts

constructor(public dialogRef: MatDialogRef<PopupShellComponent>, @Inject(MAT_DIALOG_DATA) public data) {}

When angular open popup, I pass information about which popup should be opened in the data field.

 constructor(private dialog: MatDialog) {}
 
 openPopup() {
     const dialogRef = this.dialog.open(PopupShellComponent, {
          data: { component: UserPopupComponent },
     });
 }

How can I pass data to UserPopupComponent when I open it in PopupShellComponent?

I know that I can use injector with ngComponentOutlet, but I couldn't make a working version.

You've already injected `@Inject(MAT_DIALOG_DATA) public data`. If you `console.log(data)`, don't you see the data passed? — eko, May 24 '21 at 10:37
@eko I need to pass User1, User2 etc to UserComponent when opening it. Now it just static component — Oleg Shchegolev, May 24 '21 at 10:47
Have you checked: https://stackoverflow.com/a/53547609/5706293? — eko, May 24 '21 at 10:59

score -1 · Answer 1 · answered May 24 '21 at 10:48

-1

Please read following blog it will be very helpful for you Using Mat Dialog

answered May 24 '21 at 10:48

ISK

85
1
9

How to pass data to a component when opening a material popup

1 Answers1