title: ngoninit not working on dynamically component
body: <p>I tried to created dynamically  component for reporting, which is i got the tutorial from this link :</p>
  
  <p><a href="https://angular.io/guide/dynamic-component-loader" rel="nofollow noreferrer">https://angular.io/guide/dynamic-component-loader</a></p>
  
  <p>Dynamic component is already load, but ngOnInit is not working, i had explorer many way such as :</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/55660594/ngoninit-is-not-being-triggered-in-dynamically-created-component">ngOnInit is not being triggered in dynamically created component</a> </li>
  </ul>
  
  <p>But still not solve my problem.</p>
  
  <p>Here is my code :</p>
  
  <p><strong>item class</strong></p>
  
  <pre><code>export class ReportItem {
    constructor(public component: Type&lt;any&gt;, public data: any) {}
  }
  </code></pre>
  
  <p><strong>inteface</strong></p>
  
  <pre><code>export interface ReportComponent {
      data: any;
    }
  </code></pre>
  
  <p><strong>directive</strong></p>
  
  <pre><code>@Directive({
    selector: '[reporting]',
  })
  export class ReportDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;section id="reporting-contener"&gt;
    &lt;ng-template reporting&gt;&lt;/ng-template&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>ts to create dynamic component</strong></p>
  
  <pre><code>@Component({
    selector: 'app-reporting',
    templateUrl: './reporting.component.html',
    styleUrls: ['./reporting.component.scss']
  })
  export class ReportingComponent implements OnInit {
   reports: ReportItem = null;
    @ViewChild(ReportDirective) reportHost: ReportDirective;
    backTo:Boolean = false;
    reportName:string = ""
    constructor(
      private route: ActivatedRoute,
      private router:Router,
      private componentFactoryResolver: ComponentFactoryResolver,
      private reportservice:ReportService,
      private gm:GeneralMethod,
    ) { 
  
      this.route.params.subscribe(params =&gt; {
        this.reportName = params['reportName']
        this.reports = this.reportservice.getReports(this.reportName);
        this.route.queryParams.subscribe(params =&gt; {
          if(!this.gm.isObjectEmpty(params)){
  
            this.reports.data= params;
  
          }else{
  
            this.backTo = true;
          }
        });
  
      });
  
    }
    componentRef = null
    ngOnInit(){
      if(this.backTo ){
        //this.router.navigate["transaction"]
      }
  
      const reportItem = this.reports;
  
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(reportItem.component);
      const viewContainerRef = this.reportHost.viewContainerRef;
      viewContainerRef.clear();
      this.componentRef = viewContainerRef.createComponent(componentFactory);
      (&lt;ReportComponent&gt;this.componentRef.instance).data = reportItem.data;
      this.componentRef.changeDetectorRef.detectChanges();
    }
    ngOnDestroy() {
      this.componentRef.destroy(); 
     }
  }
  </code></pre>
  
  <p>Code for dynamic component :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      Test :  {{data.test}} Testing : {{data.testing}}
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>ts</strong></p>
  
  <pre><code>export class ReportingTesting implements ReportComponent, OnInit, AfterViewInit {
    @Input() data: any;
  
    testing = "100" //not working
    constructor(){ //not working
      this.testing = "Test call on constructor"
    }
    ngOnInit(){ //not working
      this.testing = "Test call on ngoninit"
    }
    ngAfterViewInit(){ //not working
      this.testing = "Test call on ngAfterViewInit"
    }
  }
  </code></pre>
  
  <p><strong>services</strong></p>
  
  <pre><code>@Injectable()
  
  export class ReportService {
    getReports(reportName:string) {
      let lsReport = [];
      lsReport["test"] = new ReportItem(ReportingTesting, {});
  
      return lsReport[reportName];
    }
  }
  </code></pre>
  
  <p><strong>Route navigate</strong></p>
  
  <pre><code>this.router.navigate(['/report/test'], { queryParams: {'test':"Test Param", route:""}});
  </code></pre>
  
  <p>The Result when i call the component :</p>
  
  <p><a href="https://i.stack.imgur.com/MbMcP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MbMcP.png" alt="enter image description here"></a></p>
  
  <p>Result should be :</p>
  
  <pre><code>//constructor
  Test : Test Param Testing : Test call on constructor
  
  //ngOnInit
  Test : Test Param Testing : Test call on ngoninit
  
  //ngAfterViewInit
  Test : Test Param Testing : Test call on ngAfterViewInit
  </code></pre>
  
  <p>Am I forgot something?
  I would be glad for any help.</p>