Angular 4 and selecting menu item from dropdown

Question

I'm using Angular 4 and Bootstrap 3.3.7 for the client and Django for the backend. I have a drop down menu with several menu items like this:

      <ul *dropdownMenu class="dropdown-menu">
        <li routerLink='/sortedby/name' routerLinkActive="active"><a routerLink='/sortedby/title' routerLinkActive="active">Title</a></li>
        <li routerLink='/sortedby/artist' routerLinkActive="active"><a routerLink='/sortedby/artist' routerLinkActive="active">Artist</a></li>
      </ul>

My routing is implemented like this:

    const appRoutes: Routes = [
    {
        path:"search",
        component: SearchDetailComponent,
    },
    {
        path:"sortedby/:sortby",
        component: RecordListComponent,
    }, 
    {
        path:"",  //default path
        component: HomeComponent,
        pathMatch: 'full',
    },  
    {
        path:"**",  //wildcard
        component: NotFoundComponent,
    }
]

which works great. When either menu item is selected, the ngOnInit method in RecordListComponent gets called which, eventually, calls the back end to retrieve the data sorted either by artist or by name.

What I would like to do is if the user clicks the same menu item twice in a row, I would like to see the data sorted in ascending order and then in descending order.

The problem is when either menu item is selected twice in a row, the second time its selected, ngOnInit never gets called.

Suggestions?

mbnx · Accepted Answer · 2017-09-15 11:00:41Z

1

I don't know whether I understood you right, but if your event handling fails due to text selection, you could make the text unselectable by css:

li {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

answered Sep 15, 2017 at 11:00

mbnx

9425 silver badges11 bronze badges

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

9 Comments

Phil O Over a year ago

I want to be able to select the menu item twice in a row and if it trigger an event.

mbnx Over a year ago

You may want to handle a double click event? Take a look at this question to avoid a pitfall: stackoverflow.com/questions/36113861/…

Phil O Over a year ago

Thanks, but double click event is not relevant. The user clicks artist to sort the list of items by artist in ascending order, then user wants to see the list in descending order so user selects the artist menu item again. This second selection is not "heard".

mbnx Over a year ago

I see, I did not understand what you want to do. Well to "hear" the selection, you have to maintain state. Currently you are changing the route, angular has no reason to "count" how many times you clicked on the link, it exactly does what you told: It changes the route. Instead of using router links, handle a click event on each menu item. Switch a boolean state between ascending/descending.

Phil O Over a year ago

So, since the route was changed on the first selection, there is no need for the "mechanism" to change the route again (to the same route) upon second selection?

|

Collectives™ on Stack Overflow

Angular 4 and selecting menu item from dropdown

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related