CODEWITHSUNDEEP
angulartypescript
hY8vVpf3tyR57Xib
hY8vVpf3tyR57Xib

Reputation: 3915

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

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?

Upvotes: 3

Views: 2001

Answers (2)

NTP
NTP

Reputation: 4448

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>

Upvotes: 3

dileepkumar jami
dileepkumar jami

Reputation: 2265

Try this

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

Upvotes: 1

Related Questions