How to use Mat-Select with property [Selected] - html

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>