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
– JeffryHouser, Commented Jul 9, 2018 at 12:21
if you want to remove dynamically check this stackoverflow.com/questions/44939878/… — Chellappan வ
– Chellappan வ, Commented Jul 9, 2018 at 12:30

Akj · Accepted Answer · 2018-07-09 12:14:27Z

2

You can remove and add dynamically using *ngIf

HTML:

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

TS:

showComponent: boolean = false

answered Jul 9, 2018 at 12:14

Akj

7,2513 gold badges31 silver badges41 bronze badges

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

3 Comments

cucuru Over a year ago

thanks but I would prefer remove it, because it has some problems with drag and drop library

cyberpirate92 Over a year ago

@cucuru It's not clear what you mean remove it, *ngIf does remove it from the DOM

Akj Over a year ago

hello @cucuru *ngIf will remove the dom from view

Collectives™ on Stack Overflow

How to remove component from view?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related