Destroy component instance once created from service

Question

I’m creating components dynamic using a service. Component was created, but the ngOnDestroy lifecycle look is not getting called.

Below is my service file code.

@Injectable()
export class CreateComponentService implements OnDestroy {
  private rootViewContainer: ViewContainerRef;
  private componentFactory: ComponentFactory<any>;
  private componentReference;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  setRootViewContainerRef(view: ViewContainerRef): void {
    this.rootViewContainer = view;
  }

  createComponent(content, type) {
    this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(type);
    this.componentReference = this.rootViewContainer.createComponent(this.componentFactory);
    this.componentReference.instance.contentOnCreate(content);
  }

  ngOnDestroy() {
    // Destroy components to avoide memory leaks
    this.componentReference.destroy();
  }
}

In Component.ts

constructor(private service: CreateComponentService) {}

      data.forEach(response => {
        this.service.createComponent(response, type);
      });

Please show me the best way to destroy the component instance

Why do you want to call a _destroy_ event when you are creating something? As I understand your code, the reference component will be destroyed only when the `CreateComponent` service is destroyed — Al-un, Mar 21 '19 at 09:37
So I'm creating component inside a loop based on the data object. For each dataType I'm creating component. I need to destroy the component instance, once the view is created. that's the reason I used `ngOnDestroy ` . — stack s, Mar 21 '19 at 09:46
You are not destroying the service so the `ngOnDestroy` hook is never called. If you want to destroy the component handled by the service, you would need a `destroyComponent` method and call it appropriately — Al-un, Mar 21 '19 at 09:50
I've created a stackblitz project, Could check and tel me how the component can be destroyed https://stackblitz.com/edit/dynamic-component-example-5o8pz8 — stack s, Mar 21 '19 at 10:30
Sorry, I still don't understand why nor when you need to destroy created components. Either `SadComponent` or `HappyComponent` ==> you are talking about destroying those component, right? — Al-un, Mar 21 '19 at 12:07
yes. I've created those two components . After its been rendered I need to destroy the instance. But view should be maintained — stack s, Mar 21 '19 at 12:42

ABOS · Answer 1 · 2019-03-21T13:52:25.240

You don't explicitly destroy the service, and the service onDestroy method won't be called.

You can try to detach the views from the change-detection tree, which is similar to what you need,

private insertComponent(componentType): void {
    const factory = this.factoryResolver.resolveComponentFactory(componentType);
    var containerRef = this.rootViewContainer.createComponent(factory);
    // always get the most recently appended node
    var viewRef = this.rootViewContainer.get(this.rootViewContainer.length - 1);
    viewRef.detach();
    containerRef = null;
}

containerRef will be garbage collected eventually. And since you detach the view, it will behave like static content. Note that if you destroy containerRef, the associated view/html will also get destroyed.

update: demo https://stackblitz.com/edit/dynamic-component-example-swrj8j?file=src/app/service-based/factory.service.ts

With the above solutions, I'm not able to see the content getting generated. No errors in console — stack s, Mar 21 '19 at 13:45

Destroy component instance once created from service

1 Answers1