Angular2 - * ngFor and * ngIf on the same element that creates the error

Question

I have an array of users and I want to show only male users on the table. Here is how I am trying to achieve this:

import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; @Component({ selector: 'app', template:` <table> <tbody> <tr *ngFor="#user of users" *ngIf="user.gender == 'male' " > <td>{{user.name}}</td> <td>{{user.gender}}</td> </tr> </tbody> </table> ` }) export class AppCmp{ public users = [ { name: "Eesa", gender: "male" }, { name: "Abdullah", gender: "male" }, { name: "Javeria", gender: "female" } ] } bootstrap(AppCmp); 

but I get the following error:

EXCEPTION: TypeError: Unable to read gender property undefined

as you can see, i am using * ngFor and * ngIf for the same element, i.e. tr . Why can't I use * ngFor and * ngIf for one item? Is there any other way to achieve this? I restarted the problem here on plunker , you can see the error on the console.

Answer 1

In fact, ngIf and ngFor for the same element are not supported. You can use the extended ngIf syntax to be able to implement this:

 <tr *ngFor="#user of users"> <template [ngIf]="user.gender == 'male'"> <td>{{user.name}}</td> <td>{{user.gender}}</td> </template> </tr>