2

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?

Phil O
  • 1,588
  • 4
  • 28
  • 52

1 Answers1

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;
}
mbnx
  • 912
  • 5
  • 11
  • I want to be able to select the menu item twice in a row and if it trigger an event. – Phil O Sep 15 '17 at 11:03
  • You may want to handle a double click event? Take a look at this question to avoid a pitfall: https://stackoverflow.com/questions/36113861/angular-2-click-and-dblclick-on-the-same-element-not-working-good – mbnx Sep 15 '17 at 11:11
  • 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". – Phil O Sep 15 '17 at 11:15
  • 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. – mbnx Sep 15 '17 at 11:18
  • 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? – Phil O Sep 15 '17 at 11:25
  • Depends on your design. You may not need a route change at all. You could just maintain a variable switching between ascending/descending and trigger a data service fetching new results. – mbnx Sep 15 '17 at 11:27
  • Thanks for your help – Phil O Sep 15 '17 at 11:28
  • Don't forget to upvote if it helped you. :) if you have further questions about implementation, feel free to ask more detailed questions. – mbnx Sep 15 '17 at 11:34
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154532/discussion-between-phil-o-and-mbnx). – Phil O Sep 15 '17 at 11:54