Dynamic insert component in angular

Asked Jan 21 '18 at 20:19

Active Jan 21 '18 at 22:05

Viewed 93 times

I need insert a component dynamically, my problem is that I need modify the default template to insert a value as input in the tag like this:

<app-round [round]="round" #round>  </app-round>

I use ComponentFactoryResolver to insert this component in the view something like that:

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

//  method to insert in the view is
private addComponent() {
    // check and resolve the component
    var comp = this.componentFactoryResolver.resolveComponentFactory(BirdComponent);

    // create component inside container #parent
    var birdComponent = this.container.createComponent(comp);

    // see explanations
    birdComponent.instance._ref = birdComponent;

So, this works fine but I don't know how insert the input 'round' like the app-round tag.

I need insert a lot of this round tag but with different values dynamically.

Any ideas?

edited Jan 21 '18 at 22:05

Estus Flask

206,104
70
425
565

asked Jan 21 '18 at 20:19

Matias Celiz

1

Have you tried `birdComponent.instance.round`? – yurzui Jan 21 '18 at 20:26
Yeah I'm now trying this `birdComponent.instance.round = Round // this is my model` – Matias Celiz Jan 21 '18 at 20:37
yurzui -- Thanks buddy the method `birdComponent.instance` works for me. the only problem is that this just add one round instance and I need more. – Matias Celiz Jan 21 '18 at 20:42
see my answer here https://stackoverflow.com/questions/48154057/how-to-load-dynamic-html-into-div-with-component-angular5/48254860#48254860 – nicearma Jan 21 '18 at 21:07

Dynamic insert component in angular

0 Answers0