CODEWITHSUNDEEP
angulartypescript
UmaiZ
UmaiZ

Reputation: 133

Angular filter data from html

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"

Upvotes: 0

Views: 643

Answers (2)

Steve
Steve

Reputation: 1943

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.

Upvotes: 1

sandy
sandy

Reputation: 448

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

Upvotes: 0

Related Questions