Angular 2: How to delete dynamically created children component

Asked Nov 03 '16 at 18:51

Active Nov 03 '16 at 18:51

Viewed 2,647 times

I have a list component and within the list component, there are children items components that are created dynamically using componentFactoryResolver/createComponent. There is a button that allows you to delete the corresponding item component. How can I achieve this? I don't know how to identify the item component (e.g. what is it's index?) that was clicked and destroying that particular component amongst the list of components.

ListComponent.html

<button (click)="add()></button>
//this is where the item components will be created

ListComponent.ts

add() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(ItemComponent);
    this.itemRef = this.viewContainerRef.createComponent(factory);
}

ItemComponent.html

<button (click)="deleteItem()"></button>
<list-component></list-component>

asked Nov 03 '16 at 18:51

PBandJen

2,167
2
16
28

1

Doesn't `this.itemRef.destroy()` work? – eko Nov 03 '16 at 18:57
I tried that and it didn't destroyit. Would you put this in ItemComponent.ts or the ListComponent.ts? – PBandJen Nov 03 '16 at 19:18
Seems to work fine in this example http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – Günter Zöchbauer Nov 03 '16 at 20:23
Thanks! I got it to work using this.itemRef.destroy() and an eventEmitter. – PBandJen Nov 06 '16 at 01:33
`this.itemRef.destroy()` worked for me. – John Apr 06 '18 at 11:35

Angular 2: How to delete dynamically created children component

0 Answers0