CODEWITHSUNDEEP
javascripthtmlangularjs
Piter Parker
Piter Parker

Reputation: 275

Angular 5 Dynamic template in MatDialog

in my component I open a MatDialog and pass data to it. In my object data.obj is under this.data.obj.html html-code stored.

In electron I would use a webview to display the html-site.

How do I display the html-code in proper way in my MatDialog in angular 5? Its possible to create the template dynamically or is there any smoother way?

@Component({
  selector: 'dialog-popup',
  template:`
  <h1 mat-dialog-title>Content-HTML</h1>
  <mat-dialog-content>
  {{this.data.obj.html}}
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-button>Complain</button>
    <button mat-button (click)=onNoClick()>Cancel</button>
  </mat-dialog-actions>
`
})
export class DialogOverview {

  constructor(
    public dialogRef: MatDialogRef<DialogOverview>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

    ngOnInit() {
    console.log(this.data.obj.html);
    }
  onNoClick(): void {

    this.dialogRef.close();
  }

}

Upvotes: 2

Views: 1461

Answers (1)

Prashanth S
Prashanth S

Reputation: 91

You can bind it to the [innerHtml] property of a html element

<mat-dialog-content>
    <div [innerHtml]="data.obj.html | keepHtml"></div>
</mat-dialog-content>

You can use dom sanitizer and write a html pipe like below to escape html sanitizing

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class KeepHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(content) {
        return this.sanitizer.bypassSecurityTrustHtml(content);
    }
}

Upvotes: 1

Related Questions