How to use Mat-Select with property [Selected]

Question

I have a component which allows for translate pipng(by .json files under assets) .That works perfectly with default select box to choose language as we wish to display.Here it is below(That works great)

  <select #langSelect (change)="translate.use(langSelect.value)">
   <option *ngFor="let lang of translate.getLangs()" 
   [value]="lang" 
   [selected]="lang === translate.currentLang">{{ lang }}
   </option>
   </select>

But to make it look much better,I want to implement this logic with mat-select and here how I tried to implement below.

With Mat-Select

  <mat-form-field>
    <mat-select #langSelect (change)="translate.use(langSelect.value)"  
     placeholder="Select offer" 
    formControlName="promo" [(value)]="selected">
    <mat-option *ngFor="let lang of translate.getLangs()" 
    [value]="lang" 
    [selected]="lang === translate.currentLang"
     >{{ lang }}
    <i class="material-icons">info</i>
    </mat-option>
    </mat-select>
    </mat-form-field>

When I run this code Error occurs because of unknown [selected] binding inside mat-option tags.I don't know is there any way to implement it with no error.Here that error in the console occurs below

ERROR

Uncaught Error: Template parse errors:
No provider for NgControl ("">{{ lang }}</option>
                              </select> -->
                                  [ERROR ->]<select #langSelect (change)="translate.use(langSelect.value)"  placeholder="Select offer" formContro"): ng:///AppModule/HeaderComponent.html@17:34

App.Module.ts

  import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FlexLayoutModule} from '@angular/flex-layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { SignupComponent } from './auth/signup/signup.component';
import { LoginComponent } from './auth/login/login.component';
import { TrainingComponent } from './training/training.component';
import { CurrentTrainingComponent } from './training/current-training/current-training.component';
import { NewTrainingComponent } from './training/new-training/new-training.component';
import { PastTrainingComponent } from './training/past-training/past-training.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { FormsModule } from '@angular/forms';
import { HeaderComponent } from './navigation/header/header.component';
import { SidenavListComponent } from './navigation/sidenav-list/sidenav-list.component';
import { StopTrainingComponent } from './training/current-training/stop-training-component';
import { AuthService } from './auth/auth.service';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';


    export function HttpLoaderFactory(httpClient: HttpClient) {
      return new TranslateHttpLoader(httpClient);
    }


    @NgModule({
      declarations: [
        AppComponent,
        SignupComponent,
        LoginComponent,
        TrainingComponent,
        CurrentTrainingComponent,
        NewTrainingComponent,
        PastTrainingComponent,
        WelcomeComponent,
        HeaderComponent,
        StopTrainingComponent,
        SidenavListComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
          }
        }),
        FormsModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MaterialModule,
        FlexLayoutModule
      ],
      //To use always same AuthService object
      providers: [AuthService],
      bootstrap: [AppComponent],
      entryComponents:[StopTrainingComponent]
    })
    export class AppModule { }

Answer 1

You can check documentation and examples here: https://material.angular.io/components/select/examples

There is also a selected example.

First problem is, selected is not available for mat-option.

What you need to do is, on your component.ts file you need to find selected element from your array, and set it to a variable.

Then in your mat-select, set [(value)] attribute as that variable. It will make it selected.

Example:

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