Write Raw Html Inside Angular Material Dialog

Question

I just want to write html as Raw inside angular Material model everythings works fine when I hard coded the html (which is return from web api).

HTML FROM API

<mat-tab-group class='demo-tab-group'><mat-tab label='Last Read'><div class='demo-tab-content'><mat-card><mat-card-content><strong>Customer No: </strong> <br/><strong>Instrument Type: </strong> Fisher107<br/><strong>Meter Capacity(Un-Corrected): </strong> 0<br/><strong>Modem Status: </strong> Disconnected<br/><strong>Region: </strong> ABC<br/><strong>Instrument S.No: </strong> 16975913<br/><strong>Sanction Load(Corrected): </strong> <br/><strong>Meter Installed At: </strong> Upstream<br/><strong>Zone: </strong> Hyderabad Zone<br/><strong>Meter Type: </strong> Orifice Meter<br/><strong>SMS Code: </strong> <br/><strong>Modem ID: </strong> 1114</mat-card-content></mat-card></div></mat-tab><mat-tab label='Daily Report'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Monthly Report'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Site Parameters'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Graph'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Location'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab></mat-tab-group>

MODEL DIALOG

openDialog(): void {
const dialogRef = this.dialog.open(ServiceDialogOverviewExampleDialogComponent,{
  width: '1080px',
  data: { message: this.statusMessage,tabsGroup:this.tabsGroup ,class:this.class,title:this.title}

});

this.tabsGroup has the html

TEMPLATE

 template: `   
<mat-card>
  <mat-card-content>
    <mat-card-title>{{data.title}}</mat-card-title>
  </mat-card-content>
   {{data.tabsGroup}}
</mat-card>'

RESULT (DYNAMIC HTML)

HARDCODED

`<mat-card>
  <mat-card-content>
    <mat-card-title>{{data.title}}</mat-card-title>
  </mat-card-content>
  <mat-tab-group class='demo-tab-group'><mat-tab label='Last Read'><div class='demo-tab-content'><mat-card><mat-card-content><strong>Customer No: </strong> <br/><strong>Instrument Type: </strong> Fisher107 <br/><strong>Meter Capacity(Un-Corrected): </strong> 0 <br/><strong>Modem Status: </strong> Disconnected<br/><strong>Region: </strong> ABC<br/><strong>Instrument S.No: </strong> 16975913 <br/><strong>Sanction Load(Corrected): </strong> <br/><strong>Meter Installed At: </strong> Upstream <br/><strong>Zone: </strong> Hyderabad Zone <br/><strong>Meter Type: </strong> Orifice Meter <br/><strong>SMS Code: </strong> <br/><strong>Modem ID: </strong> 9004</mat-card-content></mat-card></div></mat-tab><mat-tab label='Daily Report'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Monthly Report'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Site Parameters'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Graph'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Location'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab></mat-tab-group>

'

RESULT

Answer 1

Try DomSanitizer in Angular and using bypassSecurityTrustHtml to mark the HTML as security. Be careful that you might need to translate {{data.title}} to string first.

Even you use [innerHTML], you need to mark them security to shown on page.

Reference: https://angular.io/api/platform-browser/DomSanitizer

Answer 2

In this case you may use the Element’s innerHTML property as shown below,

<mat-card>
    <mat-card-content>
        <mat-card-title>{{data.title}}</mat-card-title>
    </mat-card-content>
    <div [innerHTML]="tabsGroup"></div>
 </mat-card>

For a detailed answer on how to handle potentially unsafe HTML content, please refer this answer.

Answer 3

If you are looking for the above result . You should right seprate html file and component for Dialog.

Check Angular Documentation Example. https://stackblitz.com/angular/gxqmjgmolpy?file=src%2Fapp%2Fdialog-content-example.ts

Answer 4

I don't know why the most recent question on this has been closed as a duplicate.

While innerHTML does work there are some limitations.

For those who need a more robust solution you can consider using a ViewContainerRef within the mat-dialog and injecting a TemplateRef to MAT_DIALOG_DATA.

DialogComponent Template:

<h1 mat-dialog-title>Title</h1>
<div mat-dialog-content>
    <div #dialogContent></div>
</div>
<div mat-dialog-actions>
    <button mat-button mat-dialog-close>Close</button>
</div>

DialogComponent TypeScript:

...
@ViewChild('dialogContent', { read: ViewContainerRef }) dialogContentRef: ViewContainerRef;

  ngAfterViewInit(): void {
    if(this.data?.template) {
      this.dialogContentRef.clear(); 
      this.dialogContentRef.createEmbeddedView(this.data.template); 
    }
  }

CustomComponent Template:

<ng-template #modalTemplate>
     <!--Your content goes here-->
     <button mat-button>I work!</button>
</ng-template>

CustomComponent TypeScript:

...
  @ViewChild('modalTemplate') modalTemplate: TemplateRef<any>;
...
    const dialogRef = this.dialog.open(DialogComponent, {
      data: {
        template: this.modalTemplate
      }
    });

The above approach allows you to display an ng-template from a custom component within a material dialog. This solution not only allows you to display custom components but you can control the embedded TemplateRef from the custom component.

e.g., adding a button that calls a function from CustomComponent while being displayed within the material dialog.