title: How to create Menu bar with dynamic routes in angular2?
body: <p>I want to create Menu bar with dynamic routes</p>
  
  <p>This is my Menu bar code</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
   export class tab {
  
       path: string;
       active: boolean;
     }
  
   @Component({
      moduleId: module.id,
      selector: 'business-tabs',
     templateUrl: '../views/business.tabs.html',
  })
  
  
  export class BusinessTabs {
  
    businessTabs :tab[]= [
   {
    path: 'businessProfile',
    active:true
  }, 
    {
    path: 'contacts',
    active:false
  }, {
    path: 'images',
    active: false
  } ,{
    path: 'workingTime',
    active: false
   }
  ];
  </code></pre>
  
  <p>}</p>
  
  <p><strong>business.tabs.html</strong></p>
  
  <pre><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li  *ngFor="let btab of businessTabs"&gt;&lt;a routerLink="{{btab.path}}"&gt; {{btab.title}}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>I did route  config is</p>
  
  <pre><code>import {BusinessTermsConditionComponent} from './components/business-termscondition.component';
  
  const BUSINESS_ROUTES: Routes = [
    {
     path: 'business',
     component: AdminComponent,
     children: [
        {
         path: 'businessProfile',
         component: BusinessProfileComponent,
        },
        {
         path: 'contacts',
         component: BusinessContactsComponent,
        },
        {
         path: 'images',
         component: BusinessImagesComponent,
        },
        {
        path: 'workingTime',
        component: BusinessWorkingTimeComponent,
       },
  
      ];
  
     @NgModule({
      imports: [
        RouterModule.forChild(BUSINESS_ROUTES)],
     exports: [RouterModule]
    })
    export class BusinessRoutingModule { }
  </code></pre>
  
  <p>So  I access routes like <strong>localhost:3000/business/images</strong></p>
  
  <p>In this page using selector <strong><code>&lt;business-tabs&gt;&lt;/business-tabs&gt;</code></strong> I am displaying menu bar. </p>
  
  <p>My Problem is when I click another menu like contacts, working time then it naviges the route <strong>localhost:3000/business/images/workingtime</strong> But this is not route thats why it's showing error.</p>
  
  <p><strong>Images table template is</strong></p>
  
  <pre><code>  &lt;div class="box box-default"&gt;
     &lt;div class="nav-tabs-custom"&gt;
      &lt;business-tabs&gt;&lt;/business-tabs&gt;
    &lt;/div&gt;
   &lt;/div&gt; 
  Here I am displaying menubar.
  </code></pre>
  
  <p>Please help me to create this menu bar with routes</p>