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

score 1 · Answer 1 · answered Nov 15 '19 at 07:38

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

answered Nov 15 '19 at 07:38

Jimmy Lin

1,481
6
27
44

ok thankyou I am following this https://stackoverflow.com/questions/39857858/angular-2-domsanitizer-bypasssecuritytrusthtml-svg – TAHA SULTAN TEMURI Nov 15 '19 at 08:23
Good to know you find the right direction to solve the problem. Accept answer if it's really help. – Jimmy Lin Nov 15 '19 at 08:45

Angela Amarapala · Answer 2 · 2019-11-15T07:58:21.677

0

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.

edited Nov 15 '19 at 07:58

answered Nov 15 '19 at 07:38

Angela Amarapala

1,002
10
26

1

I have used this method using this tabs does not work – TAHA SULTAN TEMURI Nov 15 '19 at 08:22
Did you try setting the `selectedIndex` of the mat-tab-group ? For example: `this.tabsGroup.selectedIndex = 1` – Angela Amarapala Nov 15 '19 at 08:57
tabsGroup is a property defined by me it does not contain selectedIndex – TAHA SULTAN TEMURI Nov 15 '19 at 09:05

score 0 · Answer 3 · answered Nov 15 '19 at 08:04

0

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

answered Nov 15 '19 at 08:04

webmatrix

122
1
2

score 0 · Answer 4 · answered Apr 27 '23 at 04:02

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.

Write Raw Html Inside Angular Material Dialog

4 Answers4