Here is the navigation bar code snippet:
<nav class="menu">
<a routerLink="textArea" class="menu-item">text-area</a>
<a routerLink="dropdown" class="menu-item">dropdown</a>
<a routerLink="autosuggest" class="menu-item">autosuggest</a>
<a routerLink="manageCookies" class="menu-item">manage-cookies</a>
<a routerLink="progressBar" class="menu-item">progress-bar</a>
</nav>
<router-outlet></router-outlet>
The routes declared in the app.routing are as follows:
const routes: Routes = [
{
path: 'textArea',
component: TextAreaComponent,
},
{
path: 'dropdown',
component: DropdownComponent,
},
{
path: 'autosuggest',
component: AutosuggestComponent,
},
{
path: 'manageCookies',
component: ManageCookiesComponent,
},
{
path: 'progressBar',
component: ProgressBarComponent,
},
];
If you want to add a custom class to the navbar based on the current route, for example, if the current route is progressBar, you can do this:
<nav class="menu" [class.myClass]="currentRoute === 'progressBar'">
.......
</nav>