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>
Here is the solutions for both your questions:
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>
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With