2

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,867
  • 9
  • 37
  • 71

1 Answers1

5

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,954
  • 10
  • 58
  • 80