Pass HTML to mat dialog - Angular Material

Question

I am trying to pass HTML to mat dialog but it shows [object HTMLTableElement] in the dialog instead of Table HTML.

Steps I have Tried:

1. Made an Element Ref in template as below:

   <table hidden #contentTable><th></th><tr></tr></table>
   

2. Accessed ViewChild in component as

   @ViewChild('contentTable', { read: ElementRef }) contentTable: ElementRef<any>;
   

3. Passed this as Data in DialogComponent as

   const tableData = this.contentTable.nativeElement;
   const dialogRef = this.dialog.open(GeneralDialogComponent, {
       panelClass: 'customDialog',
        data: {
           title: `${data.count}`,
           content: tableData
        }
   });
   

4. In DialogComponent, accessed data content as below:

   // method in component
   getHtml(html) {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
   

5. Then in HTML accessed like this:

   <div [innerHTML]="getHtml(data?.content)"></div>
   

but it does not print Table instead it prints [object HTMLTableElement].

Screenshot as below:

Any leads please?

Answer 1

you should pass the innerHtml of elementRef not itself:

<div [innerHTML]="getHtml(data?.content.innerHTML)"></div>