Angular 2 RouterLink for Select

Question

I would like to create navigation using a select element on my page. Using the RouterLink directive on an anchor tag is simple, but is there an equivalent for a select dropdown? Or am I required to create my own navigation method on my component to be called when there is a change on my select?

<a [routerLink]="[location]">Location</a>

<select (change)="navigate($event.target.value)">
    <option>--Select Option--</option>
    <option [value]="[location]">Location</option>
</select>

I am looking for something like this:

<select>
    <option>--Select Option--</option>
    <option [routerLink]="[location]">Location</option>
</select>

score 9 · Answer 1 · answered Jul 16 '16 at 14:47

9

Html template:

<select (change)="navigateTo($event.target.value)">
    <option>--Select Option--</option>
    <option value="location">Location</option>
</select>

Component:

import {Router} from '@angular/router-deprecated'; //or updated version

constructor(private router: Router){}

navigateTo(value) {
    if (value) {
        this.router.navigate([value]);
    }
    return false;
}

answered Jul 16 '16 at 14:47

Pat M

5,966
7
24
34

Really grateful, simple and it works, dont know about the good practices, but I didn't do angular and dont know anything about that but it works at once – M. Mariscal Oct 03 '18 at 08:50
Property 'value' does not exist on type 'EventTarget' – Royer Adames Jun 06 '22 at 17:33
https://stackoverflow.com/a/71779512/3044126 – Royer Adames Jun 06 '22 at 17:46

score 3 · Accepted Answer · answered May 22 '16 at 04:01

Yes you need to create a navigation method inside your component and bind it to the (change) event of the select control and then do the navigation inside that method using an injected Router.

If you look into the Angular 2 Router source code for RouterLink directive, you'll see that it is also using router.navigate behind the scene to navigate to the target route. It won't work for your select control since select does not have a click event which is captured by the RouterLink directive as you can see below:

// ** Code below is copied from Angular source code on GitHub. **
@HostListener("click")
  onClick(): boolean {
    // If no target, or if target is _self, prevent default browser behavior
    if (!isString(this.target) || this.target == '_self') {
      this._router.navigate(this._commands, this._routeSegment);
      return false;
    }
    return true;
  }

Angular 2 RouterLink for Select

2 Answers2

Linked