1

i am trying to load component dynamically using ComponentFactoryResolver

here is my code 

import {Component, ComponentRef, ViewContainerRef, ComponentFactoryResolver,
        ViewChild, OnInit, OnDestroy, AfterViewInit} from '@angular/core';
import {MyDynamicComponent} from './mycomponent';

@Component({
  selector: 'home',
  template: '<template #Component1></template>'
})
export class Home implements AfterViewInit {

private componentReference: ComponentRef<any>;

@ViewChild('Component1', { read: ViewContainerRef })
private dynamicTarget: ViewContainerRef;


  constructor(private resolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
 let componentFactory = this.resolver.resolveComponentFactory(MyDynamicComponent);
  this.componentReference = this.dynamicTarget.createComponent(componentFactory);


   }

this code is working fine But in my actual implementation the <template #Component1></template> will be generated dynamically in that case it is not working because the template id is not yet generated when it trying to load the component. is there any way to use the @viewChild after finish generating of the dom. Any help is really appreciated.

rahul cp
  • 307
  • 1
  • 3
  • 15
  • Please provide more information about how you're creating `` dynamically (ideally plunker) and what you have tried to do it working – yurzui Oct 20 '16 at 11:33
  • i am rendering those snippet with incremental id using jquery. on ngAfterViewInit() and i would like to know is there any way to do generate below code in a for lop @ViewChild('component1', { read: ViewContainerRef }) Component1: ViewContainerRef; i cant hardcode this since there will n number of container – rahul cp Oct 20 '16 at 11:58
  • Check my plunker https://plnkr.co/edit/i92kerVLuNZH7Ait4XIu?p=info Maybe it's what you want – yurzui Oct 20 '16 at 11:59
  • that was really helpful. will try to implement in this way this method doest require @viewChild. that was my biggest problem.. thumps up for that.. – rahul cp Oct 20 '16 at 12:15
  • You can take a look at this question http://stackoverflow.com/questions/40115072/how-to-load-component-dynamically-using-component-name-in-angular2 – yurzui Oct 20 '16 at 12:53
  • thanks a lot.. you are genius :) – rahul cp Oct 21 '16 at 05:40
  • @yurzui by using this i have built a component. im using angular cli to build my project. after building this app is not working because the component name what i m loading is not present in the resolver[_factories] it got changed after the build..how to solve this problem ? really need your help – rahul cp Dec 06 '16 at 05:07
  • See my update here http://stackoverflow.com/questions/40528592/ng2-dynamically-creating-a-component-based-on-a-template/40662376#40662376 – yurzui Dec 06 '16 at 06:26
  • Hi @yurzui i have updated @angular/core to 2.4.3 after that this.appRef['registerChangeDetector'](componentFactory.changeDetectorRef) this line of code is not working it throwing error : registerChangeDetector is not a function. in the latest ApplicationRef there is no way to register a changedetector. any other way to do this ? i tried doing the change detection inside the component. still UI is not updating. – rahul cp Jan 13 '17 at 09:20
  • Solved this. latest version no need to register registerChangeDetector. directly we can call changeDetectorRef.detectChanges() – rahul cp Jan 13 '17 at 09:41

0 Answers0