Utilize the compareWith feature, which is a function designed to compare the option values with the selected values. More information can be found at: https://material.angular.io/components/select/api#MatSelect

Consider an object structured as follows:

listOfObjs = [{ name: 'john', id: '1'}, { name: 'jimmy', id: '2'},...]

To implement this, create markup like so:

<mat-form-field>
  <mat-select
    [compareWith]="compareObjects"
    [(ngModel)]="obj">
       <mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
          {{ obj.name }}
       </mat-option>
    </mat-select>
</mat-form-field>

The comparison function should be defined as follows:

compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}

I have encountered a dilemma while using Angular 5 and reactive forms with mat-select. Unfortunately, none of the solutions provided above were able to display the initial value as intended.

To tackle this issue, I found that I needed to incorporate [compareWith] in order to handle the different types being utilized within the mat-select component. It seems that internally, mat-select utilizes an array to store the selected value, potentially enabling it to function seamlessly with multiple selections if that feature is enabled.

Check out the Angular Select Control Documentation for reference.

Here's how I resolved the problem:

Firstly, use Form Builder to set up the form control:

this.formGroup = this.fb.group({
    country: new FormControl([this.myRecord.country.id]),
    ...
});

Then, implement the compareWith function within your component:

compareIds(id1: any, id2: any): boolean {
    const a1 = determineId(id1);
    const a2 = determineId(id2);
    return a1 === a2;
}

Subsequently, create and export the determineId function (I found it necessary to create a separate function so that mat-select could utilize it):

export function determineId(id: any): string {
    if (id.constructor.name === 'array' && id.length > 0) {
       return '' + id[0];
    }
    return '' + id;
}

Lastly, include the compareWith attribute in your mat-select:

<mat-form-field hintLabel="select one">
<mat-select placeholder="Country" formControlName="country" 
    [compareWith]="compareIds">

    <mat-option>None</mat-option>
    <mat-option *ngFor="let country of countries" [value]="country.id">
                        {{ country.name }}
    </mat-option>
</mat-select>
</mat-form-field>

Ensure the binding is set as [value] within the mat-option like this:

<mat-select placeholder="Panel color" [(value)]="selected2">
  <mat-option *ngFor="let option of options2" [value]="option.id">
    {{ option.name }}
  </mat-option>
</mat-select>

VIEW LIVE DEMO

If you want to customize the comparison function, you can create your own compare function

[compareWith]="customCompare"

For more information, refer to the documentation. Here is an example of how the code would look:

  <div>
    <mat-select
        [(value)]="selected2" [compareWith]="customCompare">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

In your Typescript file, define the custom compare function as follows:

  customCompare(o1, o2) {
    return o1 && o2 && o1.id===o2.id;
  }

In Angular 6, the use of ngModel in reactive forms has been deprecated and fully removed in Angular 7. To accommodate this change, adjustments were made to both the template and the component.

Here is the updated template:

<mat-form-field>
    <mat-select [formControl]="filter" multiple 
                [compareWith]="compareFn">
        <mat-option *ngFor="let option of values" [value]="option"></mat-option>
    </mat-select>
</mat-form-field>

The key portions of the component (omitting onChanges and other specifics) are outlined below:

interface SelectOption {
    label: string;
    value: any;
}

export class FilterComponent implements OnInit {
    filter = new FormControl();

    @Input() selectedOptions: SelectOption[] = [];

    @Input() values: SelectOption[] = [];

    constructor() { }

    ngOnInit() {
        this.filter.setValue(this.selected);
    }

    compareFn(option1: SelectOption, option2: SelectOption): boolean {
        return compareSelectedOptions(option1, option2);
    }
}

function compareSelectedOptions(option1: SelectOption, option2: SelectOption): boolean {
    return option1 && option2 ? option1.value === option2.value : option1 === option2;
}

Note the presence of this.filter.setValue(this.selected) within ngOnInit above.

This implementation appears to function properly in Angular 6 environments.

Upon loading the page, I encountered an issue with binding the first option. Below is the solution that resolved it for me:

.html

<mat-form-field appearance="outline">    
    <mat-select #teamDropdown 
        [ngModel]="selectedGroupId" (selectionChange)="selectedGroupId=$event.value">
        <mat-option value=undefined>Please Select</mat-option>
        <mat-option *ngFor="let grp of groups" [value]="grp.groupsId">
            {{grp.groupName}}
        </mat-option>
    </mat-select>
</mat-form-field>

.ts

@ViewChild('teamDropdown') teamDropdown: MatSelect;
ngAfterViewInit() {
    setTimeout(() => {
        this.teamDropdown.options.first.select();
    });
}

I attempted to mimic the examples provided by setting the value of the mat-select to match one of the mat-options. Unfortunately, my efforts were in vain.

The error I made was binding [(value)]="someNumberVariable" to a variable of numeric type, while the mat-options values were strings. Even though they appeared identical in the template, the selection did not work.

Once I converted someNumberVariable to a string, everything functioned perfectly.

It appears that for successful selection, the mat-select and mat-option values must not only match numerically (when using numbers), but also be of the same data type - string in this case.

Here is how I solved the issue:

<mat-form-field>
  <mat-select #monedaSelect  formControlName="monedaDebito" [attr.disabled]="isLoading" [placeholder]="monedaLabel | async ">
  <mat-option *ngFor="let moneda of monedasList" [value]="moneda.id">{{moneda.detalle}}</mat-option>
</mat-select>

In TS file:

@ViewChild('monedaSelect') public monedaSelect: MatSelect;
this.genericService.getOpciones().subscribe(res => {

  this.monedasList = res;
  this.monedaSelect._onChange(res[0].id);


});

Defined object: {id: number, detalle: string}

Give this a shot!

Here is a code snippet to update selectedObjectList based on matching ids from allObjectList:

this.selectedObjectList = [{id:1}, {id:2}, {id:3}]
this.allObjectList = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
let newList = this.allObjectList.filter(e => this.selectedObjectList.find(a => e.id == a.id))
this.selectedObjectList = newList

My approach is a bit clever and more straightforward.

<div>
    <mat-select
        [placeholder]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

I utilized the placeholder to achieve my desired effect. By default, the material placeholder appears in light gray. To give the appearance that an option has been selected, I adjusted the CSS like so:

::ng-deep .mat-select-placeholder {
    color: black;
}

It is crucial to ensure that the value attribute of the MatSelect component aligns with the value attribute bound to the MatOption component in order for binding or setting default values to work effectively. For example, if you link the `caption` of your item to the value attribute of the mat-option element, then the default element on mat-select should also be set to the `caption` of your item. Similarly, if you bind the `Id` of your item to the mat-option, make sure to bind the `id` to the mat-select as well, focusing solely on the same field and not the entire item, caption, or any other.

Furthermore, it's important to perform this binding using square brackets []

After closely following the steps outlined above, I still encountered issues with selecting the initial value.

The problem was traced back to a discrepancy between my TypeScript-defined bound value as a string and the numerical data being returned by my backend API.

Due to JavaScript's loose typing, the data type was changed at runtime without triggering an error, thus preventing the selection of the initial value.

Component

myBoundValue: string;

Template

<mat-select [(ngModel)]="myBoundValue">

The solution involved updating the API to ensure that it returns a string value.

An easy way to accomplish this is by utilizing a formControl with a preset value within a FormGroup (if needed). Here's an example that demonstrates using a unit selector for an area input:

typescript

H_AREA_UNIT = 1;
M_AREA_UNIT = 2;

exampleForm: FormGroup;

this.exampleForm = this.formBuilder.group({
  areaUnit: [this.H_AREA_UNIT],
});

html

<form [formGroup]="exampleForm">
 <mat-form-field>
   <mat-label>Unit</mat-label>
   <mat-select formControlName="areaUnit">
     <mat-option [value]="H_AREA_UNIT">h</mat-option>
     <mat-option [value]="M_AREA_UNIT">m</mat-option>
   </mat-select>
 </mat-form-field>
</form>

Make sure that the value of your form control or Ng Model within the mat select tag matches the text assigned to the value in the option tags. Here's an example:

selectedFood = 'Tacos';

Template:

<mat-form-field appearance="fill">
      <mat-label>Favorite Food</mat-label>
      <mat-select [(value)]="selectedFood">
        <mat-option value=''>---------</mat-option>
        <mat-option value='Tacos'>Tacos</mat-option>
        <mat-option value='Pizza'>Pizza</mat-option>
        
      </mat-select>
    </mat-form-field>
    <p>You selected: {{selectedFood}}</p>

I completed this task.

<div>
    <mat-select [(ngModel)]="selected">
        <mat-option *ngFor="let option of options" 
            [value]="option.id === selected.id ? selected : option">
            {{ option.name }}
        </mat-option>
    </mat-select>
</div>

Usually the syntax for binding values is [value]="option", but if you are fetching data from a database, there could be a delay causing it not to function properly. It's possible that the objects fetched are somehow different even though they appear the same? Interestingly, it is likely the latter issue, as I also tested

[value]="option === selected ? selected : option"

and encountered the same problem.

In the world of comparing values, there exists an interesting predicament between numbers and strings. It seems that a number and a string will always be deemed false when compared directly. To rectify this issue, one must take matters into their own hands by casting the selected value to a string within the ngOnInit function.

This same dilemma plagued me as well, as I attempted to populate a mat-select with values from an enum using:

Object.keys(MyAwesomeEnum).filter(k => !isNaN(Number(k)));

After going through countless trials and tribulations, it became apparent that the source of the problem lay in the way the variables were being processed within the select dropdown. The crux of the matter lay in the fact that ["0","1","2"] would never equate to 1 due to the discrepancy between numbers and strings. As it turns out, 1 is not equal to "1", leading to nothing being selected as intended.

The solution then becomes crystal clear - convert your selected value into a string within ngOnInit and watch the magic unfold.

Programming Solution

const optionsFormGroup: FormGroup;
this.optionsFormGroup = this.formBuilder.group({
   optionValue: [null, Validators.required]
});

this.optionsFormGroup.get('optionValue').setValue(option[0]); //option represents the arrayName

HTML snippet

<div class="align-right" [formGroup]="optionsFG">
  <mat-form-field>
     <mat-select placeholder="Category" formControlName="optionValue">
       <mat-option *ngFor="let option of options; let i=index" [value]="option">
          {{option.Value}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>