Unable to make default selection in selection with multiple component

Question

I am having 2 form fields Vehicle type i,e (Autocomplete with filter component) and Vehicle model i,e (Select with multiple selection component) are displayed as shown in below image:

Scenario: Here on selecting Vehicle type(for ex bikes) the associated Vehicle Model (i,e bikes model) are displayed as shown in below image:

Now i want some of the vehicle Models to be selected by default like this:

I Know this is the duplicate of this question

But here my scenario is different, In that question they have set select component items to by default using the constructor.But in my case i am already having the constructor for another imported component(i,e Chips autocomplete) component.Due lack of typescript knowledge,I am unable to it. I am stuck here.

Here is the stackblitz link.

lesiano · Accepted Answer · 2018-10-16T07:43:33.383

1

Add [(ngModel)]="sel" in:

 <mat-select placeholder="Vehicle Model"  multiple [(ngModel)]="sel">

and in TS set which ones should be selected:

this.offeringControl.valueChanges.subscribe((d) => {

    if (d === 'Cars') {
      this.vehicles = this.carsmodel;
      this.sel=['Car1', 'Car2'];
    } else if (d === 'Bikes') {
      this.vehicles = this.bikesmodel;
       this.sel=['Bike1', 'Bike2'];
    } else {
      this.vehicles = this.cyclesmodel;
       this.sel=['Cycle1', 'Cycle1'];
    }
  });

edited Oct 16 '18 at 07:43

answered Oct 16 '18 at 07:32

lesiano

288
3
9

You are right, but i am having many `vehicle types`. One more is called `cars`, If i select `cars` in the **vehicle type**, the by default selected `cars model` as to come in the `vehicle model` list, i want it many `vehicles types` not for a single vehicle. – Empty_Soul Oct 16 '18 at 07:38
If possible see the full **stackblitz** example. – Empty_Soul Oct 16 '18 at 07:40
@Empty_Soul ok! I updated it! In when you change the vehicles.. you can set which ones are selected. – lesiano Oct 16 '18 at 07:44
Thank for your answer. – Empty_Soul Oct 16 '18 at 07:55

Unable to make default selection in selection with multiple component

I Know this is the duplicate of this question

1 Answers1