Calling methods in dynamically created component angular 2

Question

I need to add components dynamically from triggered events, i´ve managed to get it working with loadasroot and loadnexttolocation, but the problem is that those only return a promise for the ComponentRef and i cant find a wat to access properties and calling methods in the added components. Ive read some threads about the loadintolocation but it seems that they removed that after releasing the candidate?

Maybe you could publish some code to show how far you have got, and what you need to do next? — brianlmerritt, Jun 13 '16 at 08:03

score 1 · Answer 1 · answered Jun 13 '16 at 07:59

Now you can use the ComponentResolver class this way. On the ComponentRef instance, you can access both properties and methods of the newly created component.

@ViewChild('target', {read: ViewContainerRef}) target;

constructor(private resolver: ComponentResolver) {}

createComponent() {
  this.resolver.resolveComponent(MyComp).then(
    (factory:ComponentFactory<any>) => {
      var cmpRef = this.target.createComponent(factory);
      var cmp = cmpRef.instance;
    });
}

score 1 · Answer 2 · edited May 23 '17 at 11:54

1

then(cmpRef:ComponentRef => {
  cmpRef.instance.myProp = someValue;
  cmpRef.instance.someOutput.subscribe(val => this.someOtherOutput.next(val));
});

See also Angular 2 dynamic tabs with user-click chosen components for the new way ViewContainerRef.createComponent().

DynamicComponentLoader is deprecated.

edited May 23 '17 at 11:54

Community

1
1

answered Jun 13 '16 at 08:00

Günter Zöchbauer

623,577
216
2,003
1,567

Calling methods in dynamically created component angular 2

2 Answers2