Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular routerLinkActive for multiple paths

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?

like image 365
Sam Avatar asked Mar 05 '18 15:03

Sam


People also ask

How to avoid multiple active router links in an angular app?

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.

What is routerlinkactive in Angular 2?

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.

How to change the route programmatically in angular?

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:

What is router link styling in angular?

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.


2 Answers

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>
like image 87
yaya Avatar answered Oct 16 '22 15:10

yaya


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>
like image 21
Teddy Sterne Avatar answered Oct 16 '22 13:10

Teddy Sterne