Filter pipe does not effect ngModel value

Viewed 225

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.

0 Answers
Related