Add an if else clause within *ngFor in Angular / Typescript

Question

I am currently working on a project in Angular 7 with Typescript an am trying to optimise the following (simplified) code snippet:

<div *ngIf="!showAll">

  <div *ngFor="let filter of filters | slice:0:5;">
    <mat-checkbox [checked]="filter.selected">{{ filter.value }}</mat-checkbox>
  </div>

</div>

<div *ngIf="showAll">

  <div *ngFor="let filter of filters">
    <mat-checkbox [checked]="filter.selected">{{ filter.value }}</mat-checkbox>
  </div>

</div>

If the boolean showAll is true, I want to show all values of my filters array, if it isn't I want to slice this array to only get the first 5 entries. Is this possible in one line of code?

Refer to this answer: https://stackoverflow.com/questions/43006550/how-to-use-ngif-else — Itamar, Feb 06 '19 at 11:30

score 3 · Accepted Answer · edited Feb 06 '19 at 12:03

3

You can use ngIf with multiple conditions to achieve that.

  <div *ngFor="let filter of filters ; let i = index">
    <mat-checkbox *ngIf="showAll || i < 5" [checked]="filter.selected">{{ filter.value }}</mat-checkbox>
  </div>

edited Feb 06 '19 at 12:03

hY8vVpf3tyR57Xib

3,574
8
41
86

answered Feb 06 '19 at 11:30

NTP

4,338
3
16
24

score 1 · Answer 2 · answered Feb 06 '19 at 11:33

1

Try this

 <div *ngFor="let filter of showAll ? filters : (filters | slice:0:5) ">
    <mat-checkbox [checked]="filter.selected">{{ filter.value }}</mat-checkbox>
  </div>

answered Feb 06 '19 at 11:33

dileepkumar jami

2,185
12
15

Add an if else clause within *ngFor in Angular / Typescript

2 Answers2