0

I need do parent link. I did, but sure it correct. When I click routerLinkActive="router-class" , child and parent link can to get class "router-class", but I when click on child link - parent link must change get class routerLinkActive="router-class-other-style" and if I send link with clicked link, style must to be how is, with How it do?

<nav class="menu-container">
    <div class="container" >
    <ul class="nav navbar-nav" >
<a id="parent" routerLink="/" routerLinkActive="router-class"    >PARENT Router</a>
    <li id="menu"><a routerLink="/box" routerLinkActive="router-class">BoxComponent-CHILD</a></li>
    <li id="menu"><a routerLink="/pageone" routerLinkActive="router-class">Pageone-CHILD</a></li>
    </ul>
    </div>
</nav>
<router-outlet></router-outlet>

////////

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BoxComponent } from './box/box.component';
import { PageoneComponent } from './pageone/pageone.component';
const appRoutes: Routes = [
{path: 'box', component: BoxComponent},
{path: 'pageone', component:PageoneComponent} 

];
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true }
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

enter image description here

user348813
  • 1
  • 3

1 Answers1

0

i cant clearly get your question but as per my understanding its about different style for parent and child

you can do that by using encapsulation in component

view-encapsulation-document

Vignesh
  • 1,140
  • 1
  • 9
  • 17