I've made a notifications component whos task is to show notifications based on what is being passed to its service. Everything works great except for one thing, any directives or bound events in the html string passed to content doesn't work. In this case (click)="close() doesn't do anything.
Here is a snippet of my class:
export class CoreComponent {
constructor(private _notificationsService: NotificationsService) {
this._notificationsService.show({content: '<h1 (click)="close()">hello world</h1>'});
}
close() {
alert('closed notification');
}
}
In the notifications template I compile the content with [innerHTML]:
<div [innerHTML]="notification.content"></div>
This however only seems to compile the html, not any click events or such.
How do you compile everything and not just the html?
