Apply a condition using ngFor and ngIf in angular 2 [duplicate]

Question

Hi There I have been trying to filter an array with some success using ngIF and ngFor.

<button *ngFor="let item of items"> <div *ngIf="(item.data.type == 1)"> {{item.data.name}} </div> </button> 

This code does only show buttons with name in it for data that has type=1 but it also create empty buttons for each data entry that doesn't have type=1, I can't figure out how to get rid of empty buttons. Any help is much appreciated.

Answer 1

I would flip-flop your button and div:

<div *ngFor="let item of items">     <button *ngIf="(item.data.type == 1)">{{item.data.name}}</button> </div> 

This way only buttons get created for valid items.

If <div>'s aren't desirable use <ng-container> instead.

Though not advisable due to performance reasons, you can also use a function in your component:

<button *ngFor="let item of filterItemsOfType('1')">{{item.data.name}}</button> 

Where your component has a function:

filterItemsOfType(type){     return this.items.filter(x => x.data.type == type); } 

While this works, it is not recommended and should be avoided where possible.