This issue vexed me for some time. I was using reactive forms and I fixed it using this method. PS. Using Angular 9 and Material 9.

In the "ngOnInit" lifecycle hook

1) Get the object you want to set as the default from your array or object literal

const countryDefault = this.countries.find(c => c.number === '826');

Here I am grabbing the United Kingdom object from my countries array.

2) Then set the formsbuilder object (the mat-select) with the default value.

this.addressForm.get('country').setValue(countryDefault.name);

3) Lastly...set the bound value property. In my case I want the name value.

<mat-select formControlName="country">
   <mat-option *ngFor="let country of countries" [value]="country.name" >
          {{country.name}}

  </mat-option>
</mat-select>

Works like a charm. I hope it helps

Try this

<mat-form-field>
    <mat-select [(ngModel)]="modeselect" [placeholder]="modeselect">
        <mat-option value="domain">Domain</mat-option>
        <mat-option value="exact">Exact</mat-option>
    </mat-select>
</mat-form-field>

Component:

export class SelectValueBindingExample {
    public modeselect = 'Domain';
}

Live demo

Also, don't forget to import FormsModule in your app.module

I would like to add to Narm's answer here and have added the same as a comment under her answer.

Basically the datatype of the value assigned to [(value)] should match the datatype of the [value] attribute used for the mat-options. Especially if some one populates the options using an *ngFor as below

<mat-form-field fxHide.gt-sm='true'>
        <mat-select [(value)]="heroes[0].id">
          <mat-option *ngFor="let hero of heroes" [value]="hero.id">{{ hero.name }}</mat-option>
        </mat-select>
</mat-form-field>

Notice that, if you change the [(value)]="heroes[0].id" to [(value)]="heroes[0].name" it won't work as the data types don't match.

These are my findings, please feel free to correct me if needed.

Using Form Model (Reactive Forms)

--- Html code--
<form [formGroup]="patientCategory">
<mat-form-field class="full-width">
    <mat-select placeholder="Category" formControlName="patientCategory">
        <mat-option>--</mat-option>
        <mat-option *ngFor="let category of patientCategories" [value]="category">
            {{category.name}} 
        </mat-option>
    </mat-select>
</mat-form-field>

----ts code ---

ngOnInit() {

        this.patientCategory = this.fb.group({
            patientCategory: [null, Validators.required]
        });

      const toSelect = "Your Default Value";
      this.patientCategory.get('patientCategory').setValue(toSelect);
    }

With out form Model

--- html code --
<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

---- ts code -- selected = 'option1'; Here take care about type of the value assigning

On your typescript file, just assign this domain on modeSelect on Your ngOnInit() method like below:



 ngOnInit() {
        this.modeSelect = "domain";
      }

And on your html, use your select list.

<mat-form-field>
        <mat-select  [(value)]="modeSelect" placeholder="Mode">
          <mat-option value="domain">Domain</mat-option>
          <mat-option value="exact">Exact</mat-option>
        </mat-select>
      </mat-form-field>

Try this:

<mat-select [(ngModel)]="defaultValue">
export class AppComponent {
  defaultValue = 'domain';
}

I was able to set the default value or whatever value using the following:

Template:
          <mat-form-field>
              <mat-label>Holiday Destination</mat-label>
              <mat-select [(ngModel)]="selectedCity" formControlName="cityHoliday">
                <mat-option [value]="nyc">New York</mat-option>
                <mat-option [value]="london">London</mat-option>
                <mat-option [value]="india">Delhi</mat-option>
                <mat-option [value]="Oslo">Oslo</mat-option>
              </mat-select>
          </mat-form-field>

Component:

export class WhateverComponent implements OnInit{

selectedCity: string;    

}

ngOnInit() {
    this.selectedCity = 'london';
} 

}

Read this if you are populating your mat-select asyncronously via an http request.

If you are using a service to make an api call to return the mat-select options values, you must set the 'selected value' on your form control as part of the 'complete' section of your service api call subscribe().

For example:

  this.customerService.getCustomers().subscribe(
  customers => this.customers = customers ,
  error => this.errorMessage = error as any,
  () => this.customerSelectControl.setValue(this.mySelectedValue));

Here is the solution

import {Component} from '@angular/core';

interface Food {
  value: string;
  viewValue: string;
}

interface Car {
  value: string;
  viewValue: string;
}

/**
 * @title Basic select with initial value and no form
 */
@Component({
  selector: 'select-initial-value-example',
  templateUrl: 'select-initial-value-example.html',
})
export class SelectInitialValueExample {
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
  cars: Car[] = [
    {value: 'ford', viewValue: 'Ford'},
    {value: 'chevrolet', viewValue: 'Chevrolet'},
    {value: 'dodge', viewValue: 'Dodge'}
  ];
  selectedFood = this.foods[2].value;
  selectedCar = this.cars[0].value;

  selectCar(event: Event) {
    this.selectedCar = (event.target as HTMLSelectElement).value;
  }
}

In template use it lie this

<h4>Basic mat-select with initial value</h4>
<mat-form-field appearance="fill">
  <mat-label>Favorite Food</mat-label>
  <mat-select [(value)]="selectedFood">
    <mat-option></mat-option>
    <mat-option [value]="option.value" *ngFor="let option of foods">{{ option.viewValue }}</mat-option>
  </mat-select>
</mat-form-field>
<p>You selected: {{selectedFood}}</p>

<h4>Basic native select with initial value</h4>
<mat-form-field appearance="fill">
  <mat-label>Favorite Car</mat-label>
  <select matNativeControl (change)="selectCar($event)">
    <option value=""></option>
    <option *ngFor="let option of cars" [value]="option.value"
            [selected]="selectedCar === option.value">{{ option.viewValue }}</option>
  </select>
</mat-form-field>
<p>You selected: {{selectedCar}}</p>

Normally you are going to do this in your template with FormGroup, Reactive Forms, etc...

    this.myForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      isPublished: ['false',Validators.required]
    });

HTML :

      <mat-select [(ngModel)]="currentCompany" placeholder="All" (selectionChange)="selectionChange($event.value)">

        <mat-option>All</mat-option>
        <mat-option *ngFor="let company of logsCompanies" [value]="company">
          {{company}}
        </mat-option>

      </mat-select>

TS : Filter by company name; If the selected data is 'All', it returns undefined and if it is undefined, I return all the data.

     selectionChange(e: any) 

    {

if (e == undefined) {
  this.dataSource.data = this.allDataSource;
}

else {
  this.logDataSource.data = this.allDataSource;
  this.logDataSource.data = this.logDataSource.data.filter(x => x.companyName == e);
}
    }

In order to set default value for mat-select drop down use the below method using reactive form in angular.

HTML

<mat-select[(value)]="selectedId" [formControl]="foodId">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.name}}
    </mat-option>
</mat-select>