Définir l'option par défaut dans mat-select

Question

J'ai un simple champ de formulaire avec option de sélection dans mon projet Angular material :

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

Où [(value)]="modeSelect" est lié à la propriété modeSelect dans le fichier component.ts

Je veux faire en sorte que le <mat-option value="domain">Domain</mat-option> est sélectionné par défaut au chargement de la page.

ng-selected ne fonctionne pas pour moi

Answer 1

Travailler avec StackBlitz

Pas besoin d'utiliser ngModel ou Formulaires

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

et dans votre composant, définissez simplement votre propriété publique selected à la valeur par défaut :

selected = 'domain';

Answer 2

Essayez ceci

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

Composant :

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

Démonstration en direct

N'oubliez pas non plus d'importer FormsModule dans votre module d'application

Answer 3

Essayez ça :

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

Answer 4

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

}

Answer 5

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>

Maintenant, définissez votre valeur par défaut à

modeSelect

où vous obtenez les valeurs dans la variable Array.