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 componenet?
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%
}
Import ViewEncapsulation along with Component:
import { Component, ViewEncapsulation } from '@angular/core';
and set encapsulation for the component in the decorator, along with selector, template, css styles etc:
encapsulation: ViewEncapsulation.None
For example:
@Component({
selector: 'your-app',
templateUrl: './your.component.html',
styleUrls: ['./your.component.css'],
encapsulation: ViewEncapsulation.None, // <---------
})
You should disable encapsulation for that component. You can do it like this:
import { Component, ViewEncapsulation } from '@angular/core';
...
@Component({
...
encapsulation: ViewEncapsulation.None,
})