Angular filter data from html

Question

I have a simple list that i would like to filter.

Example code:

<div *ngFor="let x of data"></div>

example data:

  data = [
        {
         "img" : "assets/img/photos/05.jpg",
         "title" : "Denim Jeans",
         "overview": "today"    
        },
        {
         "img" : "assets/img/photos/05.jpg",
         "title" : "Denim jacket",
         "overview": "month"

        },
];

I want to show only which have overview field month.

I expected something like this:

*ngFor = "let x of data == overview"

cxↄ · Accepted Answer · 2020-01-23 05:35:28Z

1

Try this:

<ng-container *ngFor="let x of data">
  <div *ngIf="x.overview === 'month'">
    <p>{{ x.title }}</p>
  </div>
</ng-container>

The ng-container is just a logical construct that allows you to add conditions/loops/etc without them having a structural element on the page.

So, in your case the container loops though everything in the array and the inner div determines if the div appears due to the check on the x.overview value.

edited Jan 23, 2020 at 5:35

cxↄ

1,3881 gold badge15 silver badges30 bronze badges

answered Jan 23, 2020 at 0:08

Steve

1,9535 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sandy · Accepted Answer · 2020-01-23 00:44:44Z

0

You can use custom pipe to filter data like below

<div *ngFor="let x of (data | overviewMonth)">
   {{x}}
</div>



import { Pipe, PipeTransform } from '@angular/core';



@Pipe({ name: 'overviewMonth' })
export class overviewMonthsPipe implements PipeTransform {

  transform(alloverViews: data[]) {
  return alloverViews.filter(x => x.overview === 'month');
 }
}

Refer https://angular.io/guide/pipes

answered Jan 23, 2020 at 0:44

sandy

4484 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular filter data from html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related