Welcome to our comprehensive guide on Angular's Active Route feature using the routerLinkActive directive! In this tutorial, we'll explore this powerful tool that helps us style active links in our Angular applications.
By the end of this lesson, you'll understand:
routerLinkActive directiverouterLinkActive to style active linksrouterLinkActive?The routerLinkActive directive is a built-in Angular directive that allows us to dynamically apply CSS classes to navigation links based on the active route in our application. This directive is incredibly useful for improving the user experience by highlighting the currently active navigation link.
š” Pro Tip: routerLinkActive is part of Angular's Router Module, so make sure you have it imported in your application.
routerLinkActiveTo use routerLinkActive, you'll need to apply the directive to your HTML navigation links. Here's a simple example:
<nav>
<a routerLink="/home" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
</nav>In the example above, we have two navigation links ā one for the home page and one for the about page. The routerLink attribute specifies the URL for each link, and the routerLinkActive directive defines the CSS class that should be applied when the respective link is active.
š Note: The CSS class you define for routerLinkActive should be present in your CSS file for styling purposes.
Now that we have a basic understanding of routerLinkActive, let's dive into some more advanced examples.
Sometimes, you may want to style active navigation links differently depending on the route. To achieve this, you can provide a dynamic CSS class to the routerLinkActive directive.
Here's an example where we style the active home link differently from the active about link:
<nav>
<a routerLink="/home" routerLinkActive="home-active">Home</a>
<a routerLink="/about" routerLinkActive="about-active">About</a>
</nav>In our CSS file:
.home-active {
color: green;
}
.about-active {
color: blue;
}Now, when the user navigates to the home or about page, the corresponding link will be styled accordingly.
What if you have nested routes and want to style the parent route's navigation link when one of its child routes is active? You can achieve this by using the first modifier with the routerLinkActive directive.
Here's an example:
<nav>
<a routerLink="/products" routerLinkActive="active">Products</a>
<nav *ngIf="isProductActive">
<a routerLink="/products/electronics" routerLinkActive="active">Electronics</a>
<a routerLink="/products/books" routerLinkActive="active">Books</a>
</nav>
</nav>In our component's TypeScript file:
import { Component, QueryList, ViewChildren } from '@angular/core';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent {
@ViewChildren('productLinks') productLinks: QueryList<any>;
get isProductActive(): boolean {
return this.productLinks.find(link => link.active) !== undefined;
}
}In this example, we have a products navigation link and its child links for electronics and books. We use the first modifier with routerLinkActive on the products link to make it active when either of its child links is active. The isProductActive method checks if any of the product links are active.
What does the `routerLinkActive` directive do in Angular?
By now, you should have a solid understanding of Angular's routerLinkActive directive and how to use it to style active navigation links in your Angular applications. Happy coding! š