Set default option in mat-select

AngularAngular Material

Angular Problem Overview

I have a simple select option form field in my Angular material project:

component.html

  <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>

Where [(value)]="modeSelect" is binded to the modeSelect property in the component.ts file

I want to make it so the <mat-option value="domain">Domain</mat-option> is selected by default on page load.

ng-selected did not work for me

Angular Solutions

Solution 1 - Angular

Working StackBlitz

No need to use ngModel or Forms

In your html:

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

and in your component just set your public property selected to the default:

selected = 'domain';

Solution 2 - Angular

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.

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

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

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

    {{country.name}}

Works like a charm. I hope it helps

Solution 3 - Angular

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

Solution 4 - Angular

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.

Solution 5 - Angular

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

Solution 6 - Angular

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>

Solution 7 - Angular

Try this:

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

Solution 8 - Angular

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';
} 

}

Solution 9 - Angular

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));

Solution 10 - Angular

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>

Solution 11 - Angular

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]
    });

Solution 12 - Angular

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);
}
    }

Solution 13 - Angular

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>

TS file

foodId = new FormControl(foods[0].value); // to set the first element as default

FYI - Based on the requirement you can change the value

Solution 14 - Angular

You can use ngModel to link them like so, it just needs to be linked to the actual value...

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

Solution 15 - Angular

HTML

<mat-form-field>
<mat-select [(ngModel)]="modeSelect" placeholder="Mode">
  <mat-option *ngFor="let obj of Array"  [value]="obj.value">{{obj.value}}</mat-option>
</mat-select>

Now set your default value to

> modeSelect

, where you are getting the values in Array variable.

Solution 16 - Angular

It took me several hours to figure out this until the similarity of the datatypes between the array and that of the default value worked for me...

Categories
Recommended Angular Solutions
Recommended Angular Material Solutions

Previous Solution:

How to update the Context value in a Provider from the Consumer?

JavascriptReactjsReact Context

Next Solution:

C++ warning: division of double by zero

C++GccFloating PointDivide by-Zero

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questioncup_ofView Question on Stackoverflow
Solution 1 - AngularNarmView Answer on Stackoverflow
Solution 2 - AngularDarren StreetView Answer on Stackoverflow
Solution 3 - AngularVikasView Answer on Stackoverflow
Solution 4 - AngularSubbuView Answer on Stackoverflow
Solution 5 - AngularSatish babuView Answer on Stackoverflow
Solution 6 - AngularAbdus Salam AzadView Answer on Stackoverflow
Solution 7 - AngularyerView Answer on Stackoverflow
Solution 8 - AngularmeolView Answer on Stackoverflow
Solution 9 - Angularuser2177573View Answer on Stackoverflow
Solution 10 - AngularZia KhanView Answer on Stackoverflow
Solution 11 - AngularJonathanView Answer on Stackoverflow
Solution 12 - AngularMuhammed Ali KURTView Answer on Stackoverflow
Solution 13 - AngularPraveen GView Answer on Stackoverflow
Solution 14 - AngularKen MbiraView Answer on Stackoverflow
Solution 15 - AngularIrrfan23View Answer on Stackoverflow
Solution 16 - AngularCorneliusView Answer on Stackoverflow