As illustrated in this Plunker, I am dynamically injecting HTML into one of my elements, which can be simplified as follows:
@Component({
selector: 'my-comp',
template: `<span [innerHTML]="link"></span>`,
}) export class MyComponent {
private linkContent = '<a routerLink="/my-route">GoTo Route</a>';
private link;
constructor(sanitizer: DomSanitizer) {
this.link = sanitizer.bypassSecurityTrustHtml(linkContent);
}
}
This leads to
<a routerLink="/my-route">GoTo Route</a>routerLink directive on this element, resulting in a lack of "binding." Consequently, clicking the link triggers a complete reload with re-bootstrap (which does not function properly in Plunk, displaying a 404 error).
Inquiry: How can we instruct Angular to traverse the DOM (or its specific parts, or even individual elements) and execute component initialization whenever necessary?