How to click to the selected item then navigate to the corresponding component in p-dropdown?

Question

Please see the p-dropdown I modified the class City which now has one more property url. This property indicates the path of a component.

I have created the dropdown as

interface City {
    name: string;
    code: string;
    url:  string;
}

export class DropdownDemo {

cities: City[];

selectedCity: City;

constructor() {
    this.cities = [
        {name: 'New York', code: 'NY', url: 'app/ny'},
        {name: 'Rome', code: 'RM', url: 'app/rm'},
        {name: 'Washington DC', code: 'DC', url: 'app/dc'},
        {name: 'Houston', code: 'HT', url: 'app/ht'},
        {name: 'Paris', code: 'PR', url: 'app/pr'}
        ];
   }
}

The dropdown menu is in a navbar. The html page:

  <div class="collapse navbar-collapse>
    <ui class="narbar-nav mr-auto">
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/ny">NY</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/rm">RM</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/dc">DC</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/ht">HT</a>
        </li>
        <li class="nar-item>
            <a class="nav-link" href="#" routerLink="/api/pr">
                 <p-dropdown [options]="cities" [(ngModel)]="selectedCity" 
           optionLabel="name"></p-dropdown>
           </a>
         </li>
      </ui>
     </div>

The dropdown displays correctly. Now what I want is that if I click the dropdown menu item then it will go to the corresponding component. So I guess that maybe I have to bind href or routerLink somewhere. But I just don't know how?

UPDATE:

If I add a click event inside the p-dropdown element then navigating, the code seems working but the page is still on the component of the path api/pr.

Numero3bis · Accepted Answer · 2021-02-03T20:46:50.210

0

you can maybe use the onChange($event),

  <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" (onChange)="onChange($event)"></p-dropdown>

when a city is clicked you will recive all the data, then you can use

router.navigate(['xxxxx']);

to go to the page you want, but first you need to set up a router !

Edit:

you need to change this :

<a class="nav-link" href="#" routerLink="/api/pr">
  <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>
</a>

to

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" 
           optionLabel="name" (onChange)="onChange($event)"></p-dropdown>

then in your ts file you need to create a new methode like this :

onChange(event) {
    console.log('event :' + event);
    console.log(event.value);
    router.navigate([event.value.url]); // something like that

}

edited Feb 03 '21 at 20:46

answered Feb 03 '21 at 19:29

Numero3bis

16
1
3

I updated the question. The thing is router can work but it is still on the nav item component. – Hello Feb 03 '21 at 20:03
`` Will always bring you to /api/pr onChange($event) allow you to get what city is pressed and do different things, like routing your app to an other page. I think you have to implement some logic in your ts file – Numero3bis Feb 03 '21 at 20:32
Yes, I think that it maybe the problem. It looks like `` overrides the `onChange($event)`. But not sure how to deal with that. – Hello Feb 03 '21 at 20:38
I edited my answer ! (sry i'm new to stack :) – Numero3bis Feb 03 '21 at 20:44
It works, thank you. I didn't think that I have to remove `a` element. – Hello Feb 03 '21 at 20:54
Nice ! to make a link you don't have to nessesary you a lot of the time if you want to do something on a component you can go with a methode, and on your methode, route the user ! – Numero3bis Feb 03 '21 at 21:11

How to click to the selected item then navigate to the corresponding component in p-dropdown?

1 Answers1