How to set the language fields value based on the particular language option selected using angular-CodePudding

I need to update the language fields based on the language selected from the languages available with the help of two way binding based on my understanding. Please help me how achieve this in angular

Here is the Stackblitz link for the same

CodePudding user response：

I made a simple Stackblitz of what you are looking for.

Basically you bind your select to a variable selectedLanguage in your ts file.

<div>
 <button *ngFor="let language of languages" (click)="selectLanguage(language)">{{language}}</button>
</div>

<select  [(ngModel)]="selectedLanguage">
  <option *ngFor="let language of languages" [value]="language">{{language}}</option>
</select>

You also write a little selectLanguage function to set it via the buttons

export class AppComponent  {
  languages: string[] = [
    'en', 
    'de',
    'fr',
  ];

  selectedLanguage: string = 'en';

  selectLanguage(language: string): void {
    this.selectedLanguage = language;
  }
}

And you're done, your select will be updated when clicking any button