Angular 2: How can I apply directives to sanitized html/innerhtml

Question

I am working on an application where i am getting responses in html format from a server. I am using the DomSanitizer\'s bypassSecurityTrustHtml and adding the sanitized htm

Answer 1

This isn't possible with [innerHTML]="..." at all.
You can compile components at runtime to get components and directives for dynamic HTML.

See How can I use/create dynamic template to compile dynamic Component with Angular 2.0? for more details.

Answer 2

Maybe try using Pipe, like this:

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

@Pipe({ name: 'safeHTML' })
export class SafeHtml implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) { }

    transform(html: string) {
        return this.sanitizer.bypassSecurityTrustHtml(html)
    }
} 

and than [innerHtml]="htmlExample | safeHTML"