Below is my code, dynamically binded html objects are not calling the respective component function. In Angular1.x we can easily achieve by $compile but in angular2+ i don't know how to achieve like below. Any help is much appreciated.
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
console.log(this.sanitized.bypassSecurityTrustHtml(value))
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
@Component({
selector: 'my-app',
template: `
<div [innerHtml]="html | safeHtml">
</div>
`,
})
export class App {
name:string;
html: safeHtml;
constructor() {
this.name = 'Angular2'
this.html = "<input type="text" (ngModelChange)="navigateToCasual($event)" name="name"><input type="radio" name="name">
<input type="button" (click)="navigateToCasual()" name="name">";
}
navigateToCasual(){
console.log("clicked")
}
}