Dynamically append Angular2 components to the dom

Question

I want to be able to click a button in order to add a new component. So for example, if Angular 2 was more like Angular 1 I could do:

<button (click)="addComponent()">add</button>

ts:

addComponent():void { 
    let component =  $compile('<component-selector></component-selector>')(scope)
    ele.append(component)
}

note: I know similar questions have been asked a few times on here but the answers I have read have been contradictory and mostly reliant upon deprecated code such as DynamicComponentLoader. I can't find anything relevant on the official docs and ideally want to find a standardised way of doing this.

Possible duplicate of Angular 2 dynamic tabs with user-click chosen components — eko
– eko, Commented Nov 11, 2016 at 13:21

JB Nizet · Accepted Answer · 2016-11-11 13:33:57Z

5

No. Angular 2 is pretty much as Angular 1, and doing that in Angular 1 has never been the recommended way of manipulating the DOM.

The recommended way is to modify the model, and to use the template to generate HTML from the model:

private components = [];

addComponent() {
    this.components.push({}); // this object would typically contain the inputs of the component
}

and in the template:

<component-selector *ngFor="let c of components"></component-selector>

answered Nov 11, 2016 at 13:33

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

Dynamically append Angular2 components to the dom

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related