I've got a MatDialog which is supplied with an HTML string by its parent when it's constructed. The HTML string is the source of a named div's content, and contains <table> tags embedded within the html, but for some reason the table style defined in the dialog's scss file isn't applied to the string I specify as [innerHTML] , although it works fine for <table> tags hard-coded directly into the html file.

Is there some way I can get the dialog to render the innerHTML with styles contained in the styles template for the dialog ponenet?

    export class DialogAgreementViewer implements AfterViewInit {
      constructor(public dialogRef:
        MatDialogRef<DialogAgreementViewer>, @Inject
        (MAT_DIALOG_DATA) public data: string, protected _sanitizer : DomSanitizer){
          this.agreementText = this._sanitizer.bypassSecurityTrustHtml(data);
        }
      public agreementText : SafeHtml;
      @ViewChild('agreementText') agreementTextCtl : ElementRef;
    }

HTML:

    <p>Agreement Template</p>
    <table>.          <-- Defined table styles are applied to this table.
        <tbody>
            <tr><td>Title</td><td>Name of Work</td></tr>
        </tbody>
    </table>
    
    <div [innerHTML]='agreementText'></div> <-- Table styles not applied here.

SCSS:

    table, td {
        border: 1px solid black;
       
    }
    table {
        border-collapse: collapse;
        width: 75%
    }

I've got a MatDialog which is supplied with an HTML string by its parent when it's constructed. The HTML string is the source of a named div's content, and contains <table> tags embedded within the html, but for some reason the table style defined in the dialog's scss file isn't applied to the string I specify as [innerHTML] , although it works fine for <table> tags hard-coded directly into the html file.

Is there some way I can get the dialog to render the innerHTML with styles contained in the styles template for the dialog ponenet?

    export class DialogAgreementViewer implements AfterViewInit {
      constructor(public dialogRef:
        MatDialogRef<DialogAgreementViewer>, @Inject
        (MAT_DIALOG_DATA) public data: string, protected _sanitizer : DomSanitizer){
          this.agreementText = this._sanitizer.bypassSecurityTrustHtml(data);
        }
      public agreementText : SafeHtml;
      @ViewChild('agreementText') agreementTextCtl : ElementRef;
    }

HTML:

    <p>Agreement Template</p>
    <table>.          <-- Defined table styles are applied to this table.
        <tbody>
            <tr><td>Title</td><td>Name of Work</td></tr>
        </tbody>
    </table>
    
    <div [innerHTML]='agreementText'></div> <-- Table styles not applied here.

SCSS:

    table, td {
        border: 1px solid black;
       
    }
    table {
        border-collapse: collapse;
        width: 75%
    }

• javascript
• css
• angular
• angular-material
• mat-dialog

2 Answers 2

You should disable encapsulation for that ponent. You can do it like this:

import { Component, ViewEncapsulation } from '@angular/core';
...
@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

Import ViewEncapsulation along with Component:

import { Component, ViewEncapsulation } from '@angular/core';

and set encapsulation for the ponent in the decorator, along with selector, template, css styles etc:

encapsulation: ViewEncapsulation.None

For example:

@Component({
  selector: 'your-app',
  templateUrl: './your.ponent.html',
  styleUrls: ['./your.ponent.css'],
  encapsulation: ViewEncapsulation.None, // <---------
})