How to remove component from view?

Question

I want dynamically remove components from my parent component.

<div>

 <my-component #component
    (remove)="onRemove(0)">
 </my-component>

 <my-component #component
    (remove)="onRemove(1)">
 </my-component>

 <my-component #component
    (remove)="onRemove(2)">
 </my-component>
</div>

child component emits to the parent, it works, in onRemove function:

constructor(private generalViewContainerRef: ViewContainerRef) {  
}

private onRemoveWidget(index:number) {

     this.generalViewContainerRef.remove(component);
}

but it's not working.

how can I do it?

Can you quantify not working? Do you get an error? Or other behavior? — JeffryHouser, Jul 09 '18 at 12:21
if you want to remove dynamically check this https://stackoverflow.com/questions/44939878/dynamically-adding-and-removing-components-in-angular — Chellappan வ, Jul 09 '18 at 12:30

score 2 · Accepted Answer · answered Jul 09 '18 at 12:14

2

You can remove and add dynamically using *ngIf

HTML:

<div>
 <my-component *ngIf="showComponent">
 </my-component>
</div>

TS:

showComponent: boolean = false

answered Jul 09 '18 at 12:14

Akj

7,038
3
28
40

thanks but I would prefer remove it, because it has some problems with drag and drop library – cucuru Jul 09 '18 at 12:22
1

@cucuru It's not clear what you mean **remove it**, `*ngIf` does remove it from the DOM – cyberpirate92 Jul 09 '18 at 12:25
hello @cucuru *ngIf will remove the dom from view – Akj Jul 09 '18 at 12:28

How to remove component from view?

1 Answers1