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