Angular 7 Navigate to parent/:idChildroute/childroute, invoke data according to the route from a service

Question

I have a component which has a scroll-able list for navigation, within that are 5 more components which show different information for the list item clicked, eg: When I click on a list item it opens a component with angular material mat-tab-group, there are 5 tabs and each has a router outlet in it. These tab components should show different parts of the data information invoked by click on the list item, more over if I paste

http://localhost:4200/audit/tabset/123/main

it should fetch the data of that route accordingly. the app routes should roughly look like this:

{
        path: 'audit', component: NavComponent,
        children: [
            { path: '', redirectTo: 'tabset', pathMatch: 'full' },
            {
                path: 'tabset', component: TabsetComponent,
                children: [
                    { path: '', redirectTo: 'Main', pathMatch: 'full' },
                    { path: '/:id/main', component: WorkOrderDetailComponent },
                    { path: '/:id/feed', component: FeedComponent },
                    { path: '/:id/operations', component: AuditformsmainComponent },
                    { path: '/:id/associated', component: AssociatedComponent },
                    { path: '/:id/settings', component: SettingsComponent },
                ]
            },
            { path: 'new-work-order', component: NewWorkOrderComponent },

        ]
    },

How do I achieve this?

Thank you in Advance

So what is your issue now? Do you know how to access route params using activatedroute? — Vinod Bhavnani, Feb 21 '19 at 11:41
1- what code do I write in /:id/main etc components to make the :id work? 2- how do I capture and load the routes and the id accordingly so that the right api call is done to load the data? — Jawad Farooqi, Feb 21 '19 at 11:45

score 1 · Accepted Answer · answered Feb 21 '19 at 11:54

In each of your child components, for eg: main, feed, operations etc, do this:

1) Import ActivatedRoute from @angular/router

2) Inject ActivatedRoute in your constructor

constructor(private route: ActivatedRoute){}

3) Make sure your component class implements OnInit. Then, in your ngOnInit method, do the following to get the id:

ngOnInit() {
  this.route.paramMap.subscribe(
  (params: ParamMap) => {
    this.id = params.get('id');
  }
 )
}

4) You will then have the id of the current product/item in this.id. You can then load the data using that.

Let me know if this helps :)

Thank you for the response. Can you please tell me how do I check what is the current activated component in place of main is eg: localhost:4200/audit/tabset/W011222/main, localhost:4200/audit/tabset/W011222/feed, localhost:4200/audit/tabset/W011222/settings. I have 'main', 'feed', 'operations', 'associated', 'settings'. I want to know which one is in the current URL? — Jawad Farooqi, Feb 21 '19 at 16:11

score 1 · Answer 2 · answered Feb 21 '19 at 11:56

1

You can use either the ActivatedRoute or the ActivatedRouteSnapshot to find the params of the currently activated route. You can then pass the necessary parameter to your service method to retrieve the correct information. Here is the relevant Angular documentation:

Activated Route

answered Feb 21 '19 at 11:56

Will Alexander

3,425
1
10
17

Thank you for the response. – Jawad Farooqi Feb 21 '19 at 16:09

Angular 7 Navigate to parent/:idChildroute/childroute, invoke data according to the route from a service

2 Answers2