setting up routes with navigation menu angular 2

Question

I have a tab menu and i set up my routes in my app.module.ts but i am not sure how to bridge between my tabs and my routes appropriately.

here is my tab html:

<tabs>
    <tab [tabTitle]="'Home Page'">
    </tab>
    <tab tabTitle="Feedback"> </tab>
    <tab tabTitle="Background"> </tab>
    <tab tabTitle="What we do"> </tab>
</tabs>

my routes in app.module.ts:

const appRoutes: Routes = [
  { path: './app/homepage/homepage.component.html', component: AppComponent },
  { path: './app/feedback/feedback.component.html', component: FeedbackComponent },
  { path: './app/background/background.component.html', component: BackgroundComponent },
  { path: './app/whatwedo/whatwedo.component.html', component: WhatwedoComponent}
];

What are the steps i need to take to link the tabs with the correct route link.

Answer 1

follow this example from this page https://material.angular.io/

here

    <li *ngFor="let component of category.items">
      <a [routerLink]="['/components/component/', component.id]"
         routerLinkActive="docs-component-viewer-sidenav-item-
  selected">
        {{component.name}}
      </a>
    </li>

one key point is

[routerLink]="['/components/component/', component.id]"

ante router will look like this

  {
    path: 'components',
    component: ComponentSidenav,
    children: [

    {path: 'components/:id', component: ComponentViewer},
    ],
   },

notice that the component that the parent and the child component have absolute paths, it will work

Answer 2

In your tab yo need to provide link on lcick of which it will show the licked component in the router outlet.

Make sure to add a tag <router-outlet></router-outlet> in your index.html so that routing component will be loaded there

below will be your tab navigation

<tabs>
    <tab [tabTitle]="'Home Page'">
    </tab>
    <tab tabTitle="Feedback"><a [routerLink]="['./app/homepage/homepage.component.html]"
         routerLinkActive="css-class-for-active-link">
        Home
      </a></tab>
    <tab tabTitle="Background"> </tab>
    <tab tabTitle="What we do"> </tab>
</tabs>

Then on click of the Home link, it will load the home component inside <router-outlet></router-outlet> tag