How to remove the item which has ```CLOSED``` in ngFor in angular/

Question

TS

  @Select(NotificationState.get('onDisplay')) onDisplay$: Observable<Array<Partial<Alert>>>;

HTML

<ng-container *ngFor="let notif of onDisplay$ | async; let i = index">
    <span>{{notif.name}}</span>
  </ng-container?>

the data is:

[{
    name: 'John',
    case: 'CLOSED'
},{
    name: 'Joshua',
    case: 'CLOSED'
},{
    name: 'Carl',
    case: 'NEW'
},{
    name: 'Jen',
    case: 'CLOSED'
}]

I'm using observable and what I'm trying to do is to remove the data which has case: 'CLOSED'. How to remove the item have CLOSED from the array in ngFor?

Does this answer your question? [How to apply filters to \*ngFor?](https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor) — Madhawa Priyashantha, Jun 18 '20 at 05:03

score 2 · Answer 1 · answered Jun 18 '20 at 05:02

2

You could use *ngIf directive to show only properties with certain condition.

<ng-container *ngFor="let notif of onDisplay$ | async; let i = index">
  <span *ngIf="notif.case !== 'CLOSED'">{{notif.name}}</span>
</ng-container>

answered Jun 18 '20 at 05:02

ruth

29,535
4
30
57

score 2 · Accepted Answer · answered Jun 18 '20 at 05:07

Demo write custom pipe for this

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'closedPipe'
})

export class CustomPipe implements PipeTransform {
  transform(row: any[]): any {
      return row.filter(x=>x.case!="CLOSED");       
  }
}

How to remove the item which has ```CLOSED``` in ngFor in angular/

2 Answers2