I'm trying to create two select dropboxes that one filters the other in angular.
1st select:
<select [(ngModel)]="selectedOption1">
<option *ngFor="let option of options1" [ngValue]="option.value">
{{option.description}}
</option>
</select>
2nd select:
<select [(ngModel)]="selectedOption2">
<option *ngFor="let option of options2 | filterOption2ByOption1:selectedOption1"
[ngValue]="option.value">
{{option.Category2Name}}
</option>
</select>
options1:
options1 = [{
description:"option 1-1",
value:1
},
{
description:"option 1-2",
value:2
}]
options2:
options2 = [{
option1Value:1,
description:"option 2-1",
value:1
},
{
option1Value:2,
description:"option 2-2",
value:2
}]
pipe looks like this:
@Pipe({
name: 'filterOption2ByOption1'
})
export class FilterOption2ByOption1 implements PipeTransform {
transform(options2: any, option1Value: number): any {
if(option1Value !== null && option1Value !== undefined){
return options2.filter(option => option.option1Value == option1Value)
}
return null;
}
}
what doesn't seems to work is that after the filter does its magic the ngModel
does not change.
click event nor [ngModelChange] are triggered if I trying to add them to 2nd select.
the pipe works fine. the only problem is that the ngModel is not effected by it.