Can't combine ngFor and ngIf

Question

I have a need to bind an *ngFor loop to a div, but I also need to only display it after meeting an *ngIf condition.

But Angular 4 won't let you combine them.

My code:

<ion-item class="item-icon-left item-icon-right positive" 
*ngFor="let phone of contact.shared.phones"
*ngIf="phone.phone_number !== ''">
  <i class="icon ion-ios-telephone"></i>
  <small>{{phone.phone_type}} phone</small>
  <br>{{phone.phone_number | tel}}
  <i class="icon ion-android-close" (click)="removePhone($index, phone)"></i>
</ion-item>

I get the following error:

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

So how do you go about doing that?

You cant add both for and if condition in angular instead you can give it in another div — Abhishek Ekaanth, Apr 23 '18 at 06:05

score 5 · Accepted Answer · answered Apr 23 '18 at 06:06

5

Wrap the *ngFor directive element in an ng-container:

<ng-container *ngIf="">
  <ion-item *ngFor=""></ion-item>
</ng-container>

answered Apr 23 '18 at 06:06

Carsten

4,005
21
28

1

Thanks, Carsten! – cnak2 Apr 23 '18 at 06:08
Works great for ion-slides too. Example: ... – Mike Feb 23 '21 at 12:34

Can't combine *ngFor and *ngIf

1 Answers1

Can't combine ngFor and ngIf