Filter *ngFor from array object

Question

I need to filter only those objects whose categoria is a. Is there any way to achieve this using ngFor?

service.ts :

productos: Producto[] = [
  {id:'01', categoria:'a', titulo:'title1'},
  {id:'02', categoria:'b', titulo:'title2'},
  {id:'03', categoria:'a', titulo:'title3'},
  {id:'04', categoria:'c', titulo:'title4'},
  {id:'05', categoria:'c', titulo:'title5'}
]

getProductos() {
   return of(this.productos);
}

component.ts :

ngOnInit() {
  this.productos$ = this.ps.getProductos();
}

component.html :

<div *ngFor="let producto of productos$ | async">
  {{ producto.titulo}}
</div>

Possible duplicate of [How to apply filters to \*ngFor](https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor) — Vinit, Jul 23 '18 at 23:06
@Vinit Agreed with you. I have raised the duplicate flag for this question. — FullStackDeveloper, Jul 24 '18 at 20:40

score 1 · Answer 1 · answered Jul 24 '18 at 00:46

1

You can use a pipe ( refer to Vinit link ) or you can use a filter

getProductos() {
   return of(this.productos.filter( el => el.categoria == 'a'); 
}

answered Jul 24 '18 at 00:46

wFitz

1,266
8
13

This is a very good alternative, it worked for me. Thank you. I think there is a typo, it ended up like this: `getProductos() { return of (this.productos.filter ( el => el.categoria === 'a'));}` – Paco Zevallos Jul 24 '18 at 12:50

score 0 · Answer 2 · answered Jul 24 '18 at 03:12

0

You can use filter operator to do it.

ngOnInit() {
     this.productos$ = this.ps.getProductos().pipe(filter(el => el.categoria == 'a'));
}

answered Jul 24 '18 at 03:12

Ashish Gurjar

291
1
3
5

This caused me an error in `filter`, after importing I generated another error in `categoria` – Paco Zevallos Jul 24 '18 at 12:54
@Ashish Gurjar It would be good if there is any logic code inside ngOnInit(). We can put that logic code inside a method, then put this method inside the ngOnInit() – FullStackDeveloper Jul 24 '18 at 20:37
I just did a modification to the code that is posted with question. – Ashish Gurjar Jul 25 '18 at 01:42

Filter *ngFor from array object

2 Answers2