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,411
5
26
41

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

950
8
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

97
1
2

Write Raw Html Inside Angular Material Dialog

3 Answers3