I'm sending this from Typescript
this.equationList = "<span id=\"Weight2\" class=\"weight\">W</span> = mg";
to HTML
<div [innerHTML]="equationList"></div>
All I get when I look at the element in the inspector is
<span class="weight">W</span> = mg
id="Weight2" doesn't make it through. I've tried sending other attributes in the span. Only class="weight" makes it through.
Create a pipe like below :-
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
default: throw new Error(`Invalid safe type specified: ${type}`);
}
}
}
Use your innerHtml like :-
<div [innerHTML]="equationList|safe: 'html'"></div>
Did you try the parent - child relationship? You can pass data from the child to the parent with @Outputs or you can pass data from the parent to the child with @Inputs.
{{ }}