1

I am trying to pass HTML into my Mat Dialog code as the message parameter. So I have the following but am not sure how I can pass HTML into it.

  openAlertDialog() {
    const dialogRef = this.dialog.open(AlertDialogComponent,{
      data:{
        message: '<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>',
        buttonText: {
          cancel: 'Done'
        }
      },
    });
  }

I want to add HTML in the message

I have a stackblitz of the code here https://stackblitz.com/edit/mat-dialog-example-kchzml?file=app/app.component.ts

Any idea how I can do this?

skydev
  • 1,628
  • 6
  • 28
  • 57

1 Answers1

2

You can display your HTML message using innerHTML attribute. Change it to below.

<mat-dialog-content [innerHTML]="message">
</mat-dialog-content>

Working stackblitz

Shabbir Dhangot
  • 8,642
  • 9
  • 58
  • 78