CODEWITHSUNDEEP
angularangular2-routing
Ron537
Ron537

Reputation: 990

Filtered routes in angular 2

I am building Angular 2 application and having a little conceptual problem.

In my application, I have a dashboard page which contains search-bar, navigation list and a router-outlet for the content to show. In my navigation list I have several links which include :

When I click on each of the links I am getting navigated to /items which is handled by ItemsModule and ItemsComponent. I have already implemented the routes and the links but I am struggling with the idea of how to determine which link I've used.

I thought about several ways to implement it :

  1. Route with parameters and then use switch-case inside the component to see what "filter" did I use (All / My / Pending).
  2. Specific route options - for example I'll add 3 routes : 2.1 /items - to show all items 2.2 /items/my - to show my items 2.3 /items/pending - to show pending items

In addition, as I mentioned above, I have a search-bar to search for a specific item (whether I am at 'All' / 'My' / 'Pending' items). I wonder how can I combine all of the navigations and routing and get it all work together.

Let me know if someone has figured a way to "solve" my problem.

Upvotes: 2

Views: 878

Answers (1)

user4079725
user4079725

Reputation:

I would use 3 paths:

{path: 'items', component: ItemsComponent},
{path: 'items/:type', component: ItemsComponent},
{path: 'items/:type/:searchString', component: ItemsComponent}

In the component:

this._route.params.subscribe(p => {
  var searchString = p["searchString"];
    switch(p["type"]) {
      case 'all':
         //do something
         break;
      case 'mine':
         //do something
         break;
      case 'pending':
         //do something
         break;
      default:
         //do something
         break;
    }
}

Upvotes: 1

Related Questions