Highlight the active class on the Angular Navbar

Question

Highlight the active class on the Angular Navbar

I have been successfully using [routerLinkActive]="['active']" in my application to add an active class when the button on navbar is clicked and redirects to example.com/home. However, I noticed that if I only navigate to example.com, the active class does not appear. This happens because both /home and the base URL are part of the same component. Does anyone know how I can resolve this issue?

javascript angular typescript

Answer 1

Answer №1

To manage redirection in your routing module, you can use a redirect.

const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "**", component: PageNotFoundComponent, pathMatch: "full" }
];

Here's the explanation:

The redirect will send users from example.com to example.com/home. This way, the routerLinkActive will appropriately highlight the selected route.

Check out Angular Scaffolding for a demonstration of this method. Try removing the path and observe the difference.

A more effective approach is to monitor route events:

View Demo
Access Source Code

Consider implementing something like this:

constructor(
  private router: Router
) {
  router.events.subscribe((event: RouterEvent) => {
    this.navigationInterceptor(event);
  });
}

Follow up by implementing this logic:

navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.currentUrl = event.url;

      const route: Route = this.currentUrl;

      this.loading = true;
    } else if (
      event instanceof NavigationEnd ||
      event instanceof NavigationCancel ||
      event instanceof NavigationError
    ) {
      this.loading = false;
    }
  }

Utilize the route URL within your template, similar to this example:

<a mat-tab-link matFocus="true" *ngFor="let route of routes" [routerLink]="route.url" routerLinkActive [active]="currentUrl === route.url" (click)="currentUrl = route.url" #tabs>
     {{route.label | uppercase}}
</a>

Review the source code for further clarity on implementation.

Answer 2

To manage redirection in your routing module, you can use a redirect.

const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "**", component: PageNotFoundComponent, pathMatch: "full" }
];

Here's the explanation:

The redirect will send users from example.com to example.com/home. This way, the routerLinkActive will appropriately highlight the selected route.

Check out Angular Scaffolding for a demonstration of this method. Try removing the path and observe the difference.

A more effective approach is to monitor route events:

View Demo
Access Source Code

Consider implementing something like this:

constructor(
  private router: Router
) {
  router.events.subscribe((event: RouterEvent) => {
    this.navigationInterceptor(event);
  });
}

Follow up by implementing this logic:

navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.currentUrl = event.url;

      const route: Route = this.currentUrl;

      this.loading = true;
    } else if (
      event instanceof NavigationEnd ||
      event instanceof NavigationCancel ||
      event instanceof NavigationError
    ) {
      this.loading = false;
    }
  }

Utilize the route URL within your template, similar to this example:

<a mat-tab-link matFocus="true" *ngFor="let route of routes" [routerLink]="route.url" routerLinkActive [active]="currentUrl === route.url" (click)="currentUrl = route.url" #tabs>
     {{route.label | uppercase}}
</a>

Review the source code for further clarity on implementation.

Highlight the active class on the Angular Navbar

Answer №1

Similar questions

You can submit a photo to a form as an attached file

Ways to fetch additional Product Cards using JSON and a nextPage parameter

Oops! Looks like the 'opennebula' module is missing in your Meteor.JS project

Sending a JSON object containing quotes, URLs, and other data through a POST request in Javascript

OpenLayers had trouble handling the mouse event in Ionic

Switch your attention to the following input text using AngularJS

How to determine the frequency of a specific word in a sentence using Angular 5

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Is there a way to create a curve that stays below the text and does not intersect with it?

Analyzing the object for interface compatibility

jQuery click event handlers may become unresponsive following the loading of an HTML page using the load() method

Issue with RouterLink not recognizing QueryParams

The process of efficiently uploading a batch of images to Firebase storage while also obtaining all the respective

How to execute a function in a child component that is declared in the parent component using Angular

Showing only the objects that are marked as true in the component (React)

Is there a way to implement jQuery.closest() using DOM manipulation or pure JavaScript?

Adjust the colors of two elements by clicking a button's onclick event

Stop the submission of a form using jQuery based on its unique identifier

Caution: When using Array.prototype.reduce(), make sure the arrow function returns a value

Utilizing Mongoose for Deeply Nesting Arrays: A Comprehensive Guide to Populating Subdocuments