set routerlink active on other pages

584 views Asked by At

i want to make the sidebar option highlighted [routerlinkactive state] even when i navigate to other pages. So i have sidemenu component which is shown in home component

sidemenu compoennet html file

<div class="bg-primary sidebar">
<ul class="nav-sidebar"> 
    <li class="sidemenu-item" routerLinkActive="active">
        <a routerLink="/maincontent/first">
            <md-icon>first</md-icon><span>Sidemenu-item-1</span>
        </a>
    </li>
</ul>
<div>

home compoennet html file

<sidemenu></sidemenu>
<router-outlet></router-outlet>

routes file

export const ROUTES: Routes = [
  {
    path: 'home',
    component: HomeComponent,
        children: [
        { path: 'first', component : FirstComponent }
        { path: ':id' , component : SecondCompnent}
   ]
  }
 ];

By default Sidemenu-item-1 will be highlighted when I am in First component but i want that routerlink active state to be the same even when I navigate to Second Component replacing First Component. Any ideas?

0

There are 0 answers