title: ngDestroy lifecycle is not Triggering in dynamically created Angular component
body: <p>ngDestroy lifecycle method is not triggering for dynamically created component.
  I'm creating multiple component dynamically using <strong>ComponentFactoryResolver</strong>. </p>
  
  <p>In my dynamically created component I'm fetching some data from API and I'm periodically fetching the data for every  5 mins using <strong>setInterval</strong> method. and I'm clearing the Interval instance inside ngDestroy method , while redirecting to different page, the component's ngDestroy is not triggering and the API is triggering even the component is not in the view.</p>
  
  <p>This is how I'm creating components dynamically.</p>
  
  <pre><code>    const factory = this.resolver.resolveComponentFactory(DynamicComponent); // Component Construction
      const ref = factory.create(this.injector);
  </code></pre>
  
  <p>Here is my DynamicComponent which has the functionalities</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from "@angular/core";
  
  @Component({
    selector: "app-dynamic,
    templateUrl: "./dynamic.component.html",
    styleUrls: ["./dynamic.component.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(() =&gt; {
        this.fetchData();
      }, this.loopCount);
    }
  
    fetchData() {
      // FETCHING DATA FROM API CODE ....
    }
  }
  
  </code></pre>