Search code examples
angulartypescriptmat-dialogmaterial-dialog

Showing a component in Angular Material Custom Dialog

I have a resusable custom Material UI Dialog and I wanted to show a different component in it. For example onne time call it and show a Login component and another time show a registeration component, that is just example.

The problem is when I assign my component to body (body: InvitationComponent) the result is a correct dialog box but the body (or content) is a code of my component. When you send a text, that is ok but when I want to send a component to show in middle of the Dialog that is not possible. The question is how some one can send a component as an object or template to show in a dialog? Invitation component is made of shome html code and iput controls and a button and I wanted to show it in middle of my dialog. (for example like a page that we can can show in iframe) Thanks in advance for your help.

    <div class="title">
        <h2 mat-dialog-title>{{ data.title }}</h2>
        <span mat-dialog-close class="material-icons closeButton">close</span>
    </div>
    <hr>
    <div>
        <mat-dialog-content class="mat-typography">
            {{ data.body }}
        </mat-dialog-content>
        <hr>
        <div class="actionSection">
            <mat-dialog-actions>
                <button mat-button class="secondary" mat-dialog-close>{{ data.cancelButton }}</button>
            </mat-dialog-actions>
        </div>
    </div>
</div>

my shown dialog

my calling code is:
const dialogRef = this.dialogService.open(CustomDialogComponent,
      {
        hasBackdrop: true,
        disableClose:true,
        data:{
          title: 'Invite User',
          body: InvitationComponent,
          cancelButton: 'Close' }

that is my CustomDialogComponent:

export class CustomDialogComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
    private dialogRef: MatDialogRef<CustomDialogComponent>) {
    console.log(data.body);
  }

  ngOnInit() {
  }
Solution

  • You can just have two different templates in the common dialog component html and rendering any one of it based upon the call. i have made a stackblitz example for better understanding: https://stackblitz.com/edit/angular-mat-dialog-kfdktu