Accessing local variable in HTML template using *ngFor in Angular 2

Question

I am trying to use ngFor in Angular 2, sample code below

<a *ngFor="#facet of facet_data" class="collection-item" (click)="setToSearchBarWithFilter(facet.category)">
  {{facet.category}}<span class="badge">{{facet.count}}</span>
</a>

I want to apply *ngIf in the anchor tag to show only those tags which has facet.count > 0, something like this:

<a *ngFor="#facet of facet_data" class="collection-item" (click)="setToSearchBarWithFilter(facet.category)" *ngIf="facet.count > 0">
  {{facet.category}}<span class="badge">{{facet.count}}</span>
</a>

But facet is not available in the anchor tag, its only available in the template inside the <a> tag, how can I achieve the same, what is the solution.

Günter Zöchbauer · Accepted Answer · 2016-09-19 05:31:55Z

*ngFor and *ngIf on the same tag is not supported.

Use instead:

  <ng-container *ngFor="let facet of facet_data">
    <a class="collection-item" (click)="setToSearchBarWithFilter(facet.category)" *ngIf="facet.count > 0">
    {{facet.category}}<span class="badge">{{facet.count}}</span> 
    </a>
  </ng-container>

<ng-container> is a helper element that is not stamped to the DOM.

Still supported but not recommended because of the confusing syntax:

<template ngFor let-facet [ngForOf]="facet_data"> <a class="collection-item" (click)="setToSearchBarWithFilter(facet.category)" *ngIf="facet.count > 0"> {{facet.category}}<span class="badge">{{facet.count}}</span> </a> </template>

*ngFor is the short hand for <template ngFor [ngForOf]> by using the canonical form for one of both structural tags you can work around the limitation.

See also https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngFor

Thierry Templier · Accepted Answer · 2016-04-21 07:13:22Z

0

You can't use ngIf and ngFor on the same element.

You could use the template-based approach for ngFor:

<template ngFor #facet [ngForOf]="facet_data">
  <a class="collection-item" 
       (click)="setToSearchBarWithFilter(facet.category)">
    {{facet.category}}<span class="badge">{{facet.count}}</span>
  </a>
</template>

In fact ngFor is a structural directive and using *ngFor is a syntax shortcut for the approach using the template tag.

For more details, you could have a look at this link in the section "* and ":

https://angular.io/docs/ts/latest/guide/template-syntax.html

answered Apr 21, 2016 at 7:13

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Collectives™ on Stack Overflow

Accessing local variable in HTML template using *ngFor in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related