Objective: My goal is to create a dropdown menu where users can select a value, which will then dynamically change the address of the website based on their selection.
Issue: Although I managed to make the address change upon selection, it did so for every option chosen. The desired outcome is for each selection to lead to a different address, such as site.com/en for "English" and site.com/es for "Spanish".
Attempts Made:
I have experimented with solutions found at How to get Id of selected value in Mat-Select Option in Angular 5 and reviewed Angular material documentation, although it lacked detailed information on this specific functionality.
Why isn't the specific selection being recognized?
HTML:
<mat-form-field class="right">
<mat-select>
<mat-option *ngFor="let language of languages" [value]="language.value" (selectionChange)="doSomething($event.value)">
{{language.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
TypeScript:
doSomething(event) {
//if value selected is spanish
if(event == "es")
this.routerService.navigate(['es/']);
}