CODEWITHSUNDEEP
angular
Phil O
Phil O

Reputation: 1668

Angular 4 and selecting menu item from dropdown

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?

Upvotes: 2

Views: 1089

Answers (1)

mbnx
mbnx

Reputation: 942

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;
}

Upvotes: 1

Related Questions