Conditionally apply Angular pipe on ngFor

781 Views Asked by At

I have the following code:

<tr *ngFor="let user of users">
    <td>{{user.name}}</td>
    <td>{{user.surname}}</td>
    <td>{{user.age}}</td>
    <td>{{user.email}}</td>
    <td>{{user.username}}</td>
    <td>{{user.registrationDate}}</td>
</tr>

I need to apply a custom pipe to filter users that are not active.

<tr *ngFor="let user of users | filterBy: 'active'">

It works.

But I want to have pipe being applied conditionally, only if users click on given button. I mean users press on "Show active only" and get list filtered by only active users.

Maybe I can't do that using pipe in HTML code, but I have to use it in the component, using pipe in the following way:

this.users = new FilterByPipe().transform(this.users, 'active');

Isn't this a dirty way since I should have a backup array to restore previous values?

Any better way?

0

There are 0 best solutions below