Switch up the styling in Angular 2+ depending on the current route

Question

I am currently working on creating a tab menu using Angular (v2.4.5). The active tab is determined by the route.

Here are some example routes:

const routes: Routes = [
  {
    path: 'tab1',
    component: Tab1Component,
  },
  {
    path: 'tab2',
    component: Tab2Component,
  }
];

If a user navigates to http://localhost/tab2, I want the tab2 to be highlighted (change tab CSS).

What would be the most effective way to achieve this?

Answer 1

Answer №1

RouterLinkActive

This feature allows you to include a specific CSS class to an element when the link's route is active.

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

You also have the option to assign the RouterLinkActive instance to a template variable and check the isActive status directly:

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

Answer 2

RouterLinkActive

This feature allows you to include a specific CSS class to an element when the link's route is active.

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

You also have the option to assign the RouterLinkActive instance to a template variable and check the isActive status directly:

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

Answer 3

To achieve an active state on your navigation links, simply use routerLinkActive="active" in your code like shown below:

<nav>
      <a routerLink="/page1" routerLinkActive="active">Page 1</a>
      <a routerLink="/page2" routerLinkActive="active">Page 2</a>
</nav>

To style the active link in CSS, define the active class for your nav links as follows:

nav {
   color: black;
}
nav .active {
   color: blue;
}

For more information about routes, visit this link.

Answer 4

To achieve an active state on your navigation links, simply use routerLinkActive="active" in your code like shown below:

<nav>
      <a routerLink="/page1" routerLinkActive="active">Page 1</a>
      <a routerLink="/page2" routerLinkActive="active">Page 2</a>
</nav>

To style the active link in CSS, define the active class for your nav links as follows:

nav {
   color: black;
}
nav .active {
   color: blue;
}

For more information about routes, visit this link.