ngDestroy lifecycle method is not triggering for dynamically created ponent. I'm creating multiple ponent dynamically using ComponentFactoryResolver.

In my dynamically created ponent I'm fetching some data from API and I'm periodically fetching the data for every 5 mins using setInterval method. and I'm clearing the Interval instance inside ngDestroy method , while redirecting to different page, the ponent's ngDestroy is not triggering and the API is triggering even the ponent is not in the view.

This is how I'm creating ponents dynamically.

    const factory = this.resolver.resolveComponentFactory(DynamicComponent); // Component Construction
    const ref = factory.create(this.injector);

Here is my DynamicComponent which has the functionalities

import { Component, OnInit, OnDestroy } from "@angular/core";

@Component({
  selector: "app-dynamic,
  templateUrl: "./dynamicponent.html",
  styleUrls: ["./dynamicponent.scss"]
})
export class DynamicComponent implements OnInit, OnDestroy {
  loopCount: number;
  autoRefreshInterval: any;
  constructor() {}

  ngOnInit() {
    this.fetchData();
    this.startAutoRefreshLoop();
  }

  ngOnDestroy(): void {
    console.log("Destroying loop"); // ngOnDestroy is not triggering
    this.clearAutoRefreshLoop();
  }

  clearAutoRefreshLoop() {
    clearInterval(this.autoRefreshInterval);
  }

  /*
    function for starting the Automatically recall the service for certain period of time
  */
  startAutoRefreshLoop() {
    console.log("starting loop");
    this.loopCount = 10 * 1000;
    this.autoRefreshInterval = setInterval(() => {
      this.fetchData();
    }, this.loopCount);
  }

  fetchData() {
    // FETCHING DATA FROM API CODE ....
  }
}

ngDestroy lifecycle method is not triggering for dynamically created ponent. I'm creating multiple ponent dynamically using ComponentFactoryResolver.

In my dynamically created ponent I'm fetching some data from API and I'm periodically fetching the data for every 5 mins using setInterval method. and I'm clearing the Interval instance inside ngDestroy method , while redirecting to different page, the ponent's ngDestroy is not triggering and the API is triggering even the ponent is not in the view.

This is how I'm creating ponents dynamically.

    const factory = this.resolver.resolveComponentFactory(DynamicComponent); // Component Construction
    const ref = factory.create(this.injector);

Here is my DynamicComponent which has the functionalities

import { Component, OnInit, OnDestroy } from "@angular/core";

@Component({
  selector: "app-dynamic,
  templateUrl: "./dynamic.ponent.html",
  styleUrls: ["./dynamic.ponent.scss"]
})
export class DynamicComponent implements OnInit, OnDestroy {
  loopCount: number;
  autoRefreshInterval: any;
  constructor() {}

  ngOnInit() {
    this.fetchData();
    this.startAutoRefreshLoop();
  }

  ngOnDestroy(): void {
    console.log("Destroying loop"); // ngOnDestroy is not triggering
    this.clearAutoRefreshLoop();
  }

  clearAutoRefreshLoop() {
    clearInterval(this.autoRefreshInterval);
  }

  /*
    function for starting the Automatically recall the service for certain period of time
  */
  startAutoRefreshLoop() {
    console.log("starting loop");
    this.loopCount = 10 * 1000;
    this.autoRefreshInterval = setInterval(() => {
      this.fetchData();
    }, this.loopCount);
  }

  fetchData() {
    // FETCHING DATA FROM API CODE ....
  }
}

• javascript
• angular
• angular7
• angular8

• Can you create a minimal working example on StackBlitz, for example? – alexander.sivak Commented Feb 21, 2020 at 10:10

1 Answer 1

You need to destroy the dynamically loaded ponent by manually calling : this.ponentRef.destroy(); to trigger ngOndestroy()

Example :

import {
    Component,
    ViewChild,
    ViewContainerRef,
    ComponentFactoryResolver,
    ComponentRef,
    ComponentFactory
} from '@angular/core';
import { DynamicComponent } from './dynamic.ponent';
@Component({
    selector: 'app-root',
    templateUrl: './app.ponent.html'
})
export class AppComponent {
    title = 'app';
    ponentRef: any;
    @ViewChild('container', { read: ViewContainerRef }) entry: ViewContainerRef;
    constructor(private resolver: ComponentFactoryResolver) { }
    createComponent(message) {
        this.entry.clear();
        const factory = this.resolver.resolveComponentFactory(DynamicComponent); 
        this.ponentRef = this.entry.createComponent(factory);
    }
    destroyComponent() {
        this.ponentRef.destroy(); // you need to call this
    }
}

For more information : how-to-dynamically-create-a-ponent-in-angular