In my Angular 5 project I've got a bootstrap nav-bar menu. routerLinkActive
does work nicely when the start of the path matches the routerlink of the menu, like:
<li [routerLinkActive]="['active']">
<a [routerLink]="['/entity/teacher']">Teacher</a>
</li>
the Code above activates the menu item nicely for `/entity/teacher/add' and more
Problem is, I've got a Kind of 'catch-all' navigation item which contains things which do not line up:
<li [routerLinkActive]="['active']">
<a [routerLink]="['/config']">Configuration</a>
</li>
I want this item to highlight for the paths /tasks
and /entity/settings
, too, not only for /config
.
Problem is, I can't change the routing of the app. How do I get the menu item to line up for other routing paths as well as the one in the routerLink?
Create the Angular app to be used. Create the header component that contains the navigation links. Then apply the “routerLinkActive” on each router link and provide the CSS class to this property. Here we have created the “active” class in CSS file. Provide the { exact : true } to the root route to avoid multiple active router links.
Here we have provided the “routerLinkActive” which is routing functionality that automatically activate the current route, and we have to provide the CSS class as well. Here in routerLinkActive = “active” active is a CSS class that automatically applied to the activated route.
You can also change the route programmatically in Angular. The <router-outlet> </router-outlet> acts as a placeholder for components. Angular dynamically adds the component for the route to be activated into this. The router provides two different methods to grab the route parameters. They are:
Styling Active Router Link in Angular Last Updated : 17 Jun, 2021 Styling the active router link in angular allows the user to differentiate between the active router link and inactive router links. Angular provides a special mechanism to work with active router links.
If you're looking for how to prevent multiple links to gets active, there is a [routerLinkActiveOptions]="{exact: true}"
option :
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">home</a>
You can use a template reference variable to get a reference to the outer routes and then apply the class when they are active. You can either link them to an existing routerLinkActive element or to a hidden one. Here is an example using the hidden method.
<li routerLinkActive="active" [ngClass]="{'active': tasksActive.isActive || settingsActive.isActive }">
<a [routerLink]="['/config']">Configuration</a>
</li>
<a routerLink="/tasks" routerLinkActive #tasksActive="routerLinkActive" style="display: none"></a>
<a routerLink="/entity/settings" routerLinkActive #settingsActive="routerLinkActive" style="display: none"></a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With