0
274
ViewsAngular 2 - Why is the binding of dynamic components broken?
I generate a compnent dynamically
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(TransportOrderComponent);
let dynamicComponent = this.container.createComponent(componentFactory);
The bindings of the properties within the dynamic compoment don't work. (e. g. ngIf, button click, ...)
Component html:
<button (click)="show = !show">toggle: {{show ? 'hide' : 'show'}}</button>
<br>
<div *ngIf="show"> Text to show</div>
Component TypeScript:
...
export class TransportOrderComponent {
show: boolean = true;
}
As static component everything works fine. If I add the dyn component and click the static components button the content of the dynamic component changes once
Here is a plunkr
·
Santiago Trujillo
1 answers
Answer question0
That's because you're running code outside angular zone.
This should work for you
constructor(private zone: NgZone, ...) {}
addTransportOrderComponent(jqContainer: any) {
this.zone.run(() => {
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(TransportOrderComponent);
let dynamicComponent = this.container.createComponent(componentFactory);
})
}
·
Santiago Trujillo
Report
Answer question