This is actually a spin off from here, with a much simpler use case, though. It is about how to let Angular2 know that there are externally added DOM elements containing Angular directives. In this case, I add a new click button whose on-click event is never bound. Imo I thought Zone would automatically detect any changes in the templates of their components, obviously it doesn't. Is anyone able to make that code work without the immense overhead of creating a new component for the button and load it via DynamicLoaderComponent ?
Note: I've already added NgZone and ChangeDetectorRef to play around with. Neither worked for me.
Here is a link to the full example at plunkr: plnkr.co/edit/hf180P6nkxXtJDusPdLb
And this is an relevant excerpt from the component:
import {Component, AfterViewInit, ChangeDetectorRef, NgZone, Renderer} from '@angular/core'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<p><button on-click="clickMe()">This works</button></p>
<div id="insert-here"></div>
</div>
`,
directives: []
})
export class App implements AfterViewInit {
constructor(private ref:ChangeDetectorRef, private ngZone:NgZone, private renderer:Renderer) {
}
clickMe() {
alert("Yay, it works");
}
ngAfterViewInit() {
let newButton = document.createElement("button");
newButton.setAttribute("on-click","clickMe()");
let textNode = document.createTextNode("This does not");
newButton.appendChild(textNode);
document.getElementById("insert-here").appendChild(newButton);
// please make my button work:
this.ref.detectChanges();
}
}
