javascript - Using *ngIf + template variables + loadIntoLocation to load components into view programatically -

i trying build login page login template replaced app+router-outlet.

the html:

<div class="contentwrapper" *ngif="!logedin">     login html.... </div>  <div *ngif="logedin">     <div #header></div>     <div class="contentwrapper">         <div #nav></div>         <div class="main">             <router-outlet>             </router-outlet>         </div>     </div> </div> 

the component

export class appcomponent implements oninit{ logedin = 0;  constructor(     private _dcl:dynamiccomponentloader,     private _elmref:elementref,     private _httprest:httprest //http calls service ){}  ngoninit(){} login(){     var vm = this;      //simulated xhr     settimeout(()=>{         vm.postloginsuccess()     }) } postloginsuccess(){     var vm = this;     vm.logedin =  1;     settimeout(()=>{         vm.loadapp()     },0); } loadapp(){     this._dcl.loadintolocation(header,this._elmref,"header");     this._dcl.loadintolocation(navigation,this._elmref,"nav"); } } 

i trying to: 1) show login template 2) on login success update logedin 3) hide login accordingly 4) show app

this results in error msg:

could not find variable header 

i understand happening because #header local variable under scope of *ngif template. tried resolve technique (swaping template using *ngif , local variables # using loadintolocation) in several ways without success.

the thing app frame (meaning navigation + header) not loaded via <router-outlet> need conditional way load frame components without using routing (since <router-outlet> renders content in case), after login returned succesfully.

help appriciated.

when template variable inside *ngif isn't found. i don't know if design or bug. design.

update angular 2 dynamic tabs user-click chosen components shows same example up-to-date code.

original (outdated code)

if need use dynamiccomponentloader can using wrapper component like

import {component, dynamiccomponentloader, elementref, input, viewchild, viewcontainerref} 'angular2/core'; 

@component({   selector: 'dcl-wrapper',   template: `<div #target></div>` }) export class dclwrapper {   @viewchild('target', {read: viewcontainerref}) target;    constructor(private dcl:dynamiccomponentloader) {}   @input() type;    ngonchanges() {     if(this.cmpref) {       this.cmpref.dispose();     }     if(this.type) {       this.dcl.loadnexttolocation(this.type, this.target).then((cmpref) => {         this.cmpref = cmpref;       });     }   } } 

@component({   selector: 'header-comp',   template: 'header' }) export class header{}  @component({     selector: 'my-app',     directives: [dclwrapper],     template: `     <h1>hello</h1> <div class="contentwrapper" *ngif="!logedin">     login html.... </div>  <div *ngif="logedin">     <dcl-wrapper [type]="headercmp"></dcl-wrapper>     <div class="contentwrapper">         <div #nav></div>         <div class="main">             <router-outlet>             </router-outlet>         </div>     </div> </div>     <button (click)="login()">log in</button>     `, }) export class appcomponent {   constructor(     private _dcl:dynamiccomponentloader,     private _elmref:elementref,     /*private _httprest:httprest*/ /*http calls service*/){}    headercmp = null;   logedin = true;   ngoninit(){}    login(e){     console.log('login');     //var vm = this;      //simulated xhr     settimeout(()=>{         this.postloginsuccess()     })   }    postloginsuccess(){     //var vm = this;     this.logedin =  true;     settimeout(()=>{         this.loadapp();     });   }    loadapp(){     console.log('loadapp');     this.headercmp = header;     //this._dcl.loadintolocation(header,this._elmref,"header");     //this._dcl.loadintolocation(navigation,this._elmref,"nav");   } } 

plunker example beta.17
plunker example <= beta.15