How can I write an Angular ngFor pipe to filter array of objects by object property?

Question

I have 2 selects.

One for Leagues and one for Divisions

I want to create a Pipe that will filter Divisions depending on what League is selected.

Giving the data below. If I select Random Beer League only TwoFour and SixPack should show up as options for the Divisions select.

leagues = [
  {id: 1, leagueName: 'Recreation League' },
  {id: 2, leagueName: 'Random Beer League' } 
];

divisions = [
  {id: 1, divisionName: 'SoGreen', leagueId: 1, leagueName: 'Recreation League' },
  {id: 2, divisionName: 'Yellow', leagueId: 1, leagueName: 'Recreation League' },
  {id: 3, divisionName: 'TwoFour', leagueId: 2, leagueName: 'Random Beer League' },
  {id: 4, divisionName: 'SixPack', leagueId: 2, leagueName: 'Random Beer League' }
];

PLUNKER to show the setup

*Note - data in plunker is hard coded but in my app setup its Observable.

Hardik Patel · Accepted Answer · 2017-07-19 10:37:43Z

9

I have create a custom pipe and used it to filter division dropdown.

@Pipe({
    name: 'myfilter',
    pure: false
})

export class MyFilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.leagueName.indexOf(args.leagueName) > -1);
    }
}


<option *ngFor="let division of divisions | myfilter:leagueSelected" [ngValue]="division">{{division.divisionName}}</option>

Please look into this Plnkr

edited Jul 19, 2017 at 10:37

answered Jan 12, 2017 at 5:27

Hardik Patel

3,9581 gold badge27 silver badges39 bronze badges

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

1 Comment

Hardik Patel Over a year ago

I have updated plnkr link. The reason is angular2 renamed "ngOnChange" event to "onChange".

Collectives™ on Stack Overflow

How can I write an Angular ngFor pipe to filter array of objects by object property?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related