Get selected value from a drop-down list in Angular

Question

I am pretty new to Angular and have a requirement where I need to read the selected value from a drop-down list and send the selected value to a component while routing. Can someone tell how do I extract the selected value from the list?

Here's a snippet of the drop-down list:

<div class="dropdown-content">
                <a [routerLink]="['/schedulemanagement/autoStartStopVm']">Auto Start</a>
                <a href="#">Auto Shutdown</a>
                <a href="#">Auto Scale</a>
            </div>

Possible duplicate of Angular 2: How to get the selected value from different options of a form? — msanford
– msanford, Commented May 2, 2018 at 13:45

Sravan · Accepted Answer · 2018-05-02 13:41:20Z

28

Here is the solutions for both your questions:

To get dropdown value.
To send params through route

Solution to your first question binding dropdown:

Component:

import { Component } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private route: Router){ }

  selectedLevel;
  data:Array<Object> = [
      {id: 0, name: "name1"},
      {id: 1, name: "name2"}
  ];

  selected(){
    console.log(this.selectedLevel)
  }
 }

HTML:

<h1>Drop Down</h1>
<select [(ngModel)]="selectedLevel" (change)="selected()">
    <option *ngFor="let item of data" [ngValue]="item">{{item.name}}</option>
</select>
{{selectedLevel | json}}

Here is a working DEMO

Solution to your second question To send Params to Route:

From Component:

this.route.navigate(['schedulemanagement/autoStartStopVm/' + data]);

So, selected function will be,

  selected(){
    console.log(this.selectedLevel)
   this.route.navigate(['schedulemanagement/autoStartStopVm/' + data]);
  }

From HTML:

<a [routerLink]="[schedulemanagement/autoStartStopVm/', selectedLevel]">Person</a>

edited May 2, 2018 at 13:41

answered May 2, 2018 at 13:35

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

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

4 Comments

Sravan Over a year ago

@Debo, you can accept my answer if you find it useful.

Sravan Over a year ago

@Kapilsoni, happy to help you. :-)

Kunal Tyagi Over a year ago

gettting error, can't bind to select since it isn't a known property of select. How to solve this?

Kunal Tyagi Over a year ago

issue resolved. I haven't included FormsModule in module.ts, thankyou @Sravan

SK. · Accepted Answer · 2018-05-02 13:52:36Z

3

I believe you are using bootstrap with Angular. Not <select> </select>. An easy solution could be onclick of the link.

html:

<div class="dropdown-content">
                <a (click)="getSelectedDropdown('1') [routerLink]="['/schedulemanagement/autoStartStopVm']">Auto Start</a>
                <a (click)="getSelectedDropdown('2') href="#">Auto Shutdown</a>
                <a (click)="getSelectedDropdown('3') href="#">Auto Scale</a>
            </div>

component.ts:

getSelectedDropdown(link) {
        alert(link);    
  }

answered May 2, 2018 at 13:52

SK.

1,5104 gold badges34 silver badges69 bronze badges

Comments

haMzox · Accepted Answer · 2018-05-02 13:35:56Z

0

Try this,
HTML:

<a [routerLink]="['/schedulemanagement/autoStartStopVm']" (click)="testEvent($event)">Test Event Link</a>

TS:

testEvent(event) {
console.log(event) //check the event object and get your required values.
}

answered May 2, 2018 at 13:35

haMzox

2,1091 gold badge15 silver badges25 bronze badges

Collectives™ on Stack Overflow

Get selected value from a drop-down list in Angular

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related