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' }
];
*Note - data in plunker is hard coded but in my app setup its Observable.
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