Angular - how to get value selected in dropdown menu?

Question

Goal: I want to be able to have the user click a value in a dropdown, that will change the address of the site they are on, based on the selection.

Problem: I was able to get it to change the address, but it would do it no matter what selection they made. I want it to go to a different address for each selection.

So if they choose "English" I want it to go to site.com/en. And if they choose Spanish I want it to go to site.com/es

What I tried:

I tried the solution, and many variations of it from: How to get Id of selected value in Mat-Select Option in Angular 5 I also looked through Angular material documentation but it is a bit sparse on everything needed for this topic.

Why is the specific selection not 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.value == "es")
      this.routerService.navigate(['es/']);
}

Maybe your navigate should be this.routerService.navigate(['/es']);. Are you getting any errors in the console? — R. Richards
– R. Richards, Commented Nov 26, 2019 at 23:45
Hi @R.Richards , thanks. I have some things to figure out with the specific address, however the main problem is actually that I cant get the value. There is no error in the console. And I put console.log's but they are not getting hit. Once I tried to alter the method to detect the value, it doesn't work at all anymore. — angleUr
– angleUr, Commented Nov 26, 2019 at 23:48
Does this help you: stackoverflow.com/questions/50222738/…. Looks like (selectionChange) should be on mat-select and not mat-option — R. Richards
– R. Richards, Commented Nov 26, 2019 at 23:53

Damian C · Accepted Answer · 2019-11-27 00:21:41Z

3

Try moving your selectionChanged to your select, not the option:

<mat-form-field class="right">
      <mat-select (selectionChange)="doSomething($event)">
          <mat-option *ngFor="let language of languages" [value]="language.value" >
              {{language.viewValue}}
          </mat-option>
    </mat-select>
</mat-form-field>

https://material.angular.io/components/select/api#MatSelect

answered Nov 27, 2019 at 0:21

Damian C

2,1812 gold badges16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mridul · Accepted Answer · 2019-11-27 05:35:45Z

2

Or you can use ngModel to access value directly in your function

<mat-form-field class="fullwidth" required>
  <mat-label>Select</mat-label>
  <mat-select [(ngModel)]="selectedItem" (ngModelChange)="onSelectChange(selectedItem)">
    <mat-option *ngFor="let obj of testArray" [value]="obj.value">
      {{obj.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

On your .ts file

onSelectChange(value) {
//if value selected is spanish
  if(value == "es")
    this.routerService.navigate(['es/']);
}

answered Nov 27, 2019 at 5:35

Mridul

1,3661 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular - how to get value selected in dropdown menu?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related