CODEWITHSUNDEEP
angularangular-materialangular6
SGR
SGR

Reputation: 2417

Two way data binding in autocomplete component

I am having Filter autocomplete i,e (Vehicle Type) and Select with multiple selection i,e (Vehicle model) components on the same page as shown in below image:

enter image description here

Here i want to performing 2-way data binding with Select with multiple selection component.

If i select Vehicle Type as Cars , then the cars Vehicle Model as to come like this:

enter image description here

If i select Vehicle Type as Bikes , then the bikes Vehicle Model as to come like this:

enter image description here

Here is the stackblitz link.

Upvotes: 0

Views: 242

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27343

FormControl have a valueChages method that returns an observable that emits the latest value.

Try this

ngOnInit() {
    this.list = this.CarList;
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
    this.myControl.valueChanges.subscribe((d) => {

      if (d === 'Cars') {
        this.list = this.CarList;
      } else {
        this.list = this.BikeList;
      }
    })

Example:https://stackblitz.com/edit/angular-4kxeab-glx4vg

Upvotes: 1

Related Questions