Angular 2 - Why is the binding of dynamic components broken?

Question

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

yurzui · Accepted Answer · 2017-05-04 09:09:01Z

3

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);
  })
}

Modified Plunker

answered May 4, 2017 at 9:09

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 - Why is the binding of dynamic components broken?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related