routerLinkActive don't trigger the good link

Question

So I have read some articles on the subject, without found an answer.

USE CASES

• If the app is launch on the /tools route, it's working. Then I switch to /audio, it's working.
• If the app is launch on the /audio route, it's working. Then I switch to /tools, it's NOT working. The active item is still 'Audio' and I don't know why.

PROBLEM

The active class is not added to the good item.

app.routing.ts

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: '', redirectTo: 'tools', pathMatch: 'full' },
      { path: 'tools', component: ToolsComponent },
      {
        path: 'audio',
        loadChildren: () => import('./audio/audio.module').then(m => m.AudioModule)
      },
    ]
  }
];

audio.module :

@NgModule({
  declarations: [AudioComponent, AudioDetailsComponent],
  imports: [SharedModule, AudioRoutingModule],
})

audio.routing.ts :

const routes: Routes = [
  { path: '', component: AudioComponent },
  { path: ':id', component: AudioDetailsComponent }
];

menu.component.html (which is in HomeComponent) :

<mat-nav-list fxLayout="column">
  <a mat-list-item [routerLink]="['/tools']" routerLinkActive="active">
    <span mat-line>Tools</span>
    <mat-icon matListIcon>build</mat-icon>
  </a>
  <a mat-list-item [routerLink]="['/audio']" routerLinkActive="active">
    <span mat-line>Audio</span>
    <mat-icon matListIcon>headset</mat-icon>
  </a>
</mat-nav-list>

Answer 1

I found the "Why" it's not working : In audio.component.ts, I call router.navigate in quick succession. This answer solved my issue

I juste have to reformat my code.