Passing ngFor variable to an ngIf template
All you need is to use [ngTemplateOutletContext]
Read More
Here is the way how you can achieve that :
<div> <h3>All Templates</h3> <ul *ngFor="let number of numbers"> <ng-container [ngTemplateOutlet]='number % 2 == 0 ? even_tpl : odd_tpl' [ngTemplateOutletContext]="{number:number}"></ng-container> </ul></div><ng-template #odd_tpl let-number='number'> <li>Odd: {{number}}</li> </ng-template><ng-template #even_tpl let-number='number'> <li>Even: {{number}}</li> </ng-template>
look here: Pass variable in Angular 2 template
<div *ngFor="foo in foos"> <ng-container *ngTemplateOutlet="inner; context:{name:foo}"></ng-container></div><ng-template #inner let-name="name"> {{ name }}</ng-template>
It's because the way template scope works. Templates in Angular have dynamic scope instead of regular javascript lexical scope, that means, the {{ number }}
expression inside the ng-template
is not pointing to the same number
variable in your *ngFor
, although one should think it would since you're kinda evaluating the template expression where <ng-container>
is.
If you actually define a number
property in your AppComponent
, let's say number = 42
, you can see that all the {{number}}
expressions inside <ng-template>
evaluates to 42
.
So either you should define your templates inside the scope of the *ngFor
, where the number
variable has the desired value, or somehow pass this value to both even_tpl
and odd_tpl
. As @Vivek has pointed out, you can do this with ngTemplateOutlet
and ngTemplateOutletContext
.