ANGULAR 2+ Removal of the component after its creation

Question

I'm dynamically creating a component, and I'd like to delete it after 1 second.

I want to do something like that

  ngOnInit(): void {
    const time = timer(2000);
    time.subscribe(() => {
       REMOVE YOURSELF / THIS COMPONENT
    });
  }

How are you creating your component exactly ? Please provide some code. — user4676340
– user4676340, Commented Sep 6, 2018 at 10:56
@Wojtar again, please provide some code. There are several ways to create dynamic components, without even counting what you consider yourself as "dynamic". — user4676340
– user4676340, Commented Sep 6, 2018 at 11:02

Harun Or Rashid · Accepted Answer · 2018-09-06 11:07:29Z

1

Make a directive for component holder for dynamic component as below:

import { Directive, ViewContainerRef } from "@angular/core";

@Directive({
    selector: '[component-holder]',
})
export class DynamicComponentDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
}

Use ViewChild to import it to your component as below:

@ViewChild(DynamicComponentDirective ) dynamicComponentDirective : DynamicComponentDirective ;

After creating some dynamic component, you can remove it as below.

this.viewContainerRef = this.dynamicComponentDirective.viewContainerRef;
this.viewContainerRef.clear();

edited Sep 6, 2018 at 11:07

answered Sep 6, 2018 at 11:01

Harun Or Rashid

5,9572 gold badges21 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

ANGULAR 2+ Removal of the component after its creation

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related