Angular2/4 mat-select multiple ngModel

Depending on a use-case initializing some default options as selected might not work by simply binding to the ngModel, because objects in the options and in the selected subset from the previous state have different identities.Thanks to the support for compareWith it is possible to set them as selected.

Have a look at the offical Angular docs here.

In Material2 demo-app they have an example of the function with two implementations. It's here.

In my component I have a collection of User objects [people] for the options of mat select. The component receives a collection of selected User objects [users] as Input from previous state. Fair enough, objects in [people] and objects in [users] have different identities and the subset in the multiple select does not initialize with selected checkboxes by default.

So, the magical compareWith just literally compares objects by some given values and returns true or false, and the checkboxes on the subset of [people] get the status of selected. In my code I decided to go with [(ngModel]) binding:

<mat-form-field>    <mat-select [compareWith]="compareFn" name="users" [(ngModel)]="users" multiple>        <mat-option *ngFor="let person of people" [value]="person">           {{ person.username }}        </mat-option>   </mat-select></mat-form-field>

And in the .ts file I utilize the function from the Angular doc to return true if two User objects have the same id:

compareFn(user1: User, user2: User) {    return user1 && user2 ? user1.id === user2.id : user1 === user2;}

If you have a similar use-case, it might work out-of-the-box.

On the what's-under-the-hood note, compareWith made me curious. I found out that it is based on a function in Angular2 called looseIdentical (have a look here), which in turn derives from the identical in Dart.js library by Google. It can be found here.

Please check [(ngModel)]="custonerDetails" I think there is some spelling mistake and you can also use it like [(value)]="custonerDetails".

If you're sure that ngModel has the value in it. The issue could be that the [value] property of the mat-option is losing this selection.

Try this:

[ngValue]="customer" instead of [value]= "customer"