Bindings not working in dynamically loaded component

Question

I had a problem: if I dynamically load the component, none of the bindings in the template work for me. In addition, the ngOnInit method never starts.

 loadView() { this._dcl.loadAsRoot(Injected, null, this._injector).then(component => { console.info('Component loaded'); }) } 

Dynamically loaded component

 import {Component, ElementRef, OnInit} from 'angular2/core' declare var $:any @Component({ selector: 'tester', template: ` <h1>Dynamically loaded component</h1> <span>{{title}}</span> ` }) export class Injected implements OnInit { public title:string = "Some text" constructor(){} ngOnInit() { console.info('Injected onInit'); } } 

This is my first time using dynamically loaded components, so I think you are trying to implement it incorrectly.

Here's a plunkr demonstrating the problem. Any help would be appreciated.

Answer 1

As Eric Martinez pointed out that this is a known bug related to the use of loadAsRoot . The suggested solution is to use loadNextToLocation or loadIntoLocation .

This was problematic for me, since the component that I was trying to dynamically load was a modal dialog from inside the component with fixed css positioning. I also wanted the ability to load a modal from any component and enter it at the same position in the DOM, regardless of which component it was dynamically loaded from.

My solution was to use forwardRef to insert my AppComponent root into a component that wants to dynamically load my modal.

 constructor ( ......... ......... private _dcl: DynamicComponentLoader, private _injector: Injector, @Inject(forwardRef(() => AppComponent)) appComponent) { this.appComponent = appComponent; } 

In my AppComponent , I have a method that returns an ElementRef application

 @Component({ selector: 'app', template: ` <router-outlet></router-outlet> <div #modalContainer></div> `, directives: [RouterOutlet] }) export class AppComponent { constructor(public el:ElementRef) {} getElementRef():ElementRef { return this.el; } } 

Return to my other component (the one I want to dynamically load from modal). Now I can call:

 this._dcl.loadIntoLocation(ModalComponent, this.appComponent.getElementRef(), 'modalContainer').then(component => { console.log('Component loaded') }) 

Perhaps this will help others with similar problems.

Answer 2

There is no need to flush the component instance from the DOM. use the "componentRef" from the angular2 / core package to create and delete an instance of the component. use show () to load the modal component in the right place and hide () to remove the component instance before calling loadIntoLocation a second time.

eg:

 @Component({ selector: 'app', template: ` <router-outlet></router-outlet> <div #modalContainer></div> `, directives: [RouterOutlet] }) export class AppComponent { private component:Promise<ComponentRef>; constructor(public el:ElementRef) {} getElementRef():ElementRef { return this.el; } show(){ this.component = this._dcl.loadIntoLocation(ModalComponent,this.appComponent.getElementRef(), 'modalContainer').then(component => {console.log('Component loaded')}) } hide(){ this.component.then((componentRef:ComponentRef) => { componentRef.dispose(); return componentRef; }); } }