Angular 2 conditional ngFor

Question

I'm trying to clean up my template code. I have the following:

<ul>
  <li *ngIf="condition" *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>
  <li *ngIf="!condition" *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
  </li>
</ul>

Is there a way to conditionally pick array1 or array2 to iterate through using *ngIf or something so that I don't have to repeat so much template code? This is just an example; my actual <li> contains a lot more content so I really don't want to repeat myself. Thanks!

Kinky

Answer 1

  <li *ngFor="let a of (condition ? array1 : array2)">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>

Unintentional

Thanks! Exactly what I need. – Kinky

Answer 2

You can make use of the ng-container which is not recognised by DOM, hence will only be used for a condition. See example below:

 <tr *ngFor="let company of companies">
        <ng-container *ngIf="company.tradingRegion == 1">
            <td>{{ company.name }}</td>
            <td>{{ company.mseCode }}</td>
         </ng-container>
  </tr>

The code above will: `

Display a list of all companies where the tradingRegion == 1

`

Hilliary

this will create unnecessary tr rows – Formally

We can swap the the ng-container and the tr tag. No more unnecessary rows. – Asphyxiant

Answer 3

Use a template tag with an [ngIf] outside the ngFor loop.

<ul>
  <template [ngIf]="condition">
   <li *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
   </li>
  </template>
  <template [ngIf]="!condition">
   <li *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
   </li>
  </template>
</ul>

Also read about template syntax here: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

Arceliaarceneaux

Answer 4

You cannot have both an *ngFor and an *ngIf in the same element. You could create an element inside the <li> with the *ngFor. Like:

<li *ngIf="condition">
    <ul>
        <li *ngFor="let a of array1">

Or use the conditional inside the *ngFor. Like this:

<li *ngFor="let a of (condition?array1:array2)">

Or you could use a template like Peter Salomonsen instructed.

Deuteragonist

Answer 5

We can hide the element using bootstrap display property, based on condition.

<li [ngClass]="{'d-none': condition}" *ngFor="let a of array1">
 <p>{{a.firstname}}</p>
 <p>{{a.lastname}}</p>
</li>

Chamber