Overview

Navigation is a fundamental aspect of web development, facilitating seamless transitions between different views and components within an application. In Angular, navigation is made effortless and efficient through various techniques and directives provided by the Angular Router module.

#1 Navigation with Href

Traditional HTML links with the href attribute have been the go-to method for navigation in web development. While they work perfectly fine in Angular applications, they come with a downside of causing a full page reload, which can impact performance and user experience. Despite this, they can still be used for simple navigation needs within Angular components.

• You can use standard HTML <a> elements with the href attribute to create navigation links. However, when using href, the browser performs a full page reload.

Example:

<a href="/home">Home</a>

#2 Navigation with RouterLink Directive

The RouterLink is a directive that binds the HTML element to a Route. When the HTML element on which we have used the RouterLink is clicked, it will result in navigation to that Route.

Note:RouterLink directive is an attribute directive and we can also pass additional parameters to it.

• Angular provides the routerLink directive, which allows you to create navigation links that work with the Angular router without causing a full page reload.
• You can use routerLink to navigate to a specified route path or route parameters.
• It accepts a route path or an array of route segments as its input and dynamically updates the route when clicked.

Example:

<!-- Navigate to the 'home' route -->
<a routerLink="/home">Home</a>

<!-- Navigate to the 'product' route with route parameter '123' -->
<a [routerLink]="['/product', 123]">Product</a>

#3 Programmatic Navigation with Router Service

• You can perform navigation programmatically using the Router service provided by Angular.
• Inject the Router service into a component or service and use its methods like navigate() to navigate to a specific route.

Example:

import { Router } from '@angular/router';

constructor(private router: Router) { }

navigateToHome(): void {
  this.router.navigate(['/home']);
}

Styling the Active Link

The RouterLinkActive is a directive for adding or removing classes from an HTML element that is bound to RouteLink.

Using RouterLinkActive directive, we can toggle CSS classes for active router link based on the current router state.

The routerLinkActive directive is used to apply CSS classes to elements based on the current router state. This directive is especially useful for highlighting or styling navigation links based on the active route. By applying CSS classes conditionally, you can enhance the user experience and provide visual feedback to users about their current location within the application.

Define CSS Styles:

First, define the CSS styles that you want to apply to the active link.

/* Define CSS styles for active link */
.active-link {
  color: #007bff; /* Blue color */
  font-weight: bold;
}

Apply RouterLinkActive Directive:

Next, apply the RouterLinkActive directive to the navigation links that you want to style based on the active route. RouterLinkActive adds or removes CSS classes based on whether the associated router link is active or not.

<a routerLink="/home" routerLinkActive="active-link">Home</a>
<a routerLink="/about" routerLinkActive="active-link">About</a>
<a routerLink="/products" routerLinkActive="active-link">Products</a>

In the above example, the "active-link" class will be added to the navigation link when the corresponding route is active. You can customize the class name and style it according to your preference.

routerLinkActiveOptions

the routerLinkActiveOptions property allows for more fine-grained control over the behavior of navigation links and the application of CSS classes based on the active route. This property is used in conjunction with the routerLinkActive directive to specify additional options for determining when to add or remove CSS classes to the active links.

When a child route is active, then all the parent routes are also marked as active. In that case, routeLinkActive directive is applied to the active child route and all its parent routes.

Using RouterLinkActiveOptions directive, we can set some options for routerLinkActive directive. One of the options we can set is the exact property which tells how to match the route path for styling the active route.

Let's explore how to use routerLinkActiveOptions:

1 Exact Match (Handling Nested Links):

By default, the routerLinkActive directive applies the specified CSS classes to the link when the associated route is active or its ancestor. However, you can use routerLinkActiveOptions to enforce an exact match, ensuring that the CSS classes are applied only when the link's route exactly matches the current route.

<a routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>

In this example, the "active" class will only be applied to the "Home" link when the route is exactly "/home" and not to any of its child routes.

2 Include Query Parameters and Fragments:

By default, the routerLinkActive directive ignores query parameters and fragments when determining the active state of a link. However, you can include query parameters and fragments in the route matching by setting the queryParams and fragment options to "exact" or "subset".

<a routerLink="/search" routerLinkActive="active" [routerLinkActiveOptions]="{ queryParams: 'exact', fragment: 'exact' }">Search</a>

In this example, the "active" class will only be applied to the "Search" link when the route exactly matches "/search" and includes the same query parameters and fragment.