Passing ngFor variable to an ngIf template
Solution 1
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>
Solution 2
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>
Solution 3
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
.
Related videos on Youtube
Comments
-
match over 3 years
How do I pass the current variable in an ngFor loop to ngIf, if it is using templates with then/else syntax?
It appears that they pass through fine when used inline, but aren't accessible from a template, for example:
<ul *ngFor="let number of numbers"> <ng-container *ngIf="number % 2 == 0; then even_tpl; else odd_tpl"><>/ng-container> </ul> <ng-template #odd_tpl> <li>Odd: {{number}}</li> </ng-template> <ng-template #even_tpl> <li>Even: {{number}}</li> </ng-template>
The templates don't seem to have access to
number
at all, but it works if used inline.A full example of the working and not-working versions in the following link: plunkr
-
prakash tank over 6 years@Guntram : can you please add any demo link ? because i am getting blank response. Thanks
-
Guntram over 6 yearsi moved it into an answer...
-
-
Guntram over 6 yearsHere's a plunker: stackoverflow.com/questions/40418598/…
-
match over 6 yearsThanks - I'd seen the docs on
ngTemplateOutlet
but hadn't managed to grok it into this situation - seeing a working example makes it clear how to use it! -
Vivek Doshi over 6 years@match, Glad you figure it out , Its happens sometimes :) , happy coding.