Receiving a string of HTML from the server with custom directive attributes that Angular should render, but struggling to make the directives work. Is it possible to load HTML containing custom directives?
I've been using DomSanitizer.bypassSecurityTrustHtml() method to render the markup correctly, but can't get the directives to run on the tags.
Here's an example of what I'm trying to achieve, server-side declared markup with client-side custom directives:
import {Component, Directive, ElementRef, Renderer} from "@angular/core"
import {DomSanitizer, SafeHtml} from "@angular/platform-browser"
@Component({
selector: 'MyComponent',
templateUrl: '<div [innerHTML]="myContent">',
})
export class MyComponent
{
dynamicContent: SafeHtml;
htmlFromTheServer: string = '<p>This is an input: </p><input type="text" custom>';
constructor(private domSanitizer: DomSanitizer)
{
}
ngOnInit()
{
this.dynamicContent = this.domSanitizer.bypassSecurityTrustHtml(this.htmlFromTheServer);
}
}
@Directive({
selector: '[custom]'
})
export class MyDirective
{
constructor(public element: ElementRef,
public renderer: Renderer)
{
renderer.setElementStyle(element.nativeElement, 'border', '1px solid red');
}
}
If the directive is applied to the markup, it should have a red border around it, but I'm having trouble getting it to work.