CODEWITHSUNDEEP
angular-materialmultiple-selectmultipleselection
gh0st
gh0st

Reputation: 1714

Is setting a multiple mat-select dropdown value to objects possible?

Using mat-select in multiple mode, is it possible to pre-set the selected values if the values that are part of the select options are objects?

For example if the options in the select are as follows

toppingList: any[] = [
  { id: 1, description: 'Extra cheese' },
  { id: 2, description: 'Mushroom' },
  { id: 3, description: 'Onion' },
  { id: 4, description: 'Pepperoni' },
  { id: 5, description: 'Sausage' },
  { id: 6, description: 'Tomato' }
];

Then can you pre-set the selected values for that mat-select as such?

this.toppings.setValue([{ id: 1, description: 'Extra Cheese' }]);

Taking this stackblitz as an example you see that the the form values are getting set as desired, but the select buttons in the drop down itself are not showing as checked.

Is this even possible, or am I doing something wrong?

Upvotes: 1

Views: 1245

Answers (1)

Amir Azizkhani
Amir Azizkhani

Reputation: 1804

As i know for equality of two object, for example in java, you need to write equal / hashcode for detecting what object is equal to another one.

you bound selected value to object and typescript could not understand how compares objects together. so I changed your sample and bound value of options to id and it works!

see this stackblits

Upvotes: 1

Related Questions