Modifying the standard name of the "router-link-active" class through the creation of a personalized directive to include a different class

Question

Modifying the standard name of the "router-link-active" class through the creation of a personalized directive to include a different class

Trying to incorporate Semantic UI into my Angular2 application has presented a challenge. I am unable to locate a router setting that allows me to change the default name of the "router-link-active" class to simply "active," which is crucial for proper menu display.

It seems that such a customization option does not currently exist, unlike in Vue.JS where it is available. Should I consider reaching out to developers to address this issue?

The workaround involves creating a custom directive that automatically adds the "active" class to all DOM elements with the "router-link-active" class, but I have encountered some obstacles along the way.

I came across a similar question, however, the suggested solution proved overly complex and ineffective in my case. After reviewing documentation, I devised an alternative approach as follows:

commons.ts:

@Directive({
    selector: '.router-link-active',
    host: {'[class.active]': 'trueConst'} //simply using 'true' may also suffice
})
export class ActiveRouterLinkClass {
    trueConst: boolean = true; //if 'true' works, this line could be omitted
}

Subsequently, I imported ActiveRouterLinkClass into my main.component.ts and included it in the component's list of directives. However, this resulted in an error message stating: "EXCEPTION: Unexpected directive value 'undefined' on the View of component 'Main'". Any insights on what went wrong would be greatly appreciated!

typescript angular router directive

Answer 1

Answer №1

When using Angular, directives or components are not applied to dynamically added selectors. In the case where a dynamic class like .router-link-active is applied to a link, it will not work as expected.

One alternative approach is to use a more generic selector such as [routerLink] and then check for the presence of .router-link-active using an @Input(), setting the desired class with host binding.

@Directive({
  selector: '[routerLink]')
export class RouterLinkReplaceClass {
  // Add class `my-active` when `myActiveClass` is `true`
  @HostBinding('class.my-active') 

  // Read state of `router-link-active` class
  @Input('class.router-link-active') 

  myActiveClass: bool = false;
}

Take a look at a Plunker example here

For more information, visit this Stack Overflow discussion

Update:

Since myActiveClass does not update when the router-link-active class is added or removed, I have made modifications to the directive to obtain information about the active route in a similar manner to the RouterLink directive:

import {ROUTER_DIRECTIVES, RouteConfig, Router, Instruction} from 'angular2/router';

@Directive({
  selector: '[routerLink]'
})
export class RouterLinkReplaceClass {

  //@Input('class.router-link-active')
  // myActiveClass: boolean = false;
  private _navigationInstruction: Instruction;
  @Input('routerLink')
  private _routeParams: any[];

  constructor(private _router: Router) {
    // Update the link whenever a route changes
    this._router.subscribe((_) => this._updateLink());
  }

  private _updateLink(): void {
    this._navigationInstruction = this._router.generate(this._routeParams);
  }

  @HostBinding('class.my-active')
  get isRouteActive(): boolean {
    return this._navigationInstruction ? this._router.isRouteActive(this._navigationInstruction) : null;
  }
}

Answer 2

When using Angular, directives or components are not applied to dynamically added selectors. In the case where a dynamic class like .router-link-active is applied to a link, it will not work as expected.

One alternative approach is to use a more generic selector such as [routerLink] and then check for the presence of .router-link-active using an @Input(), setting the desired class with host binding.

@Directive({
  selector: '[routerLink]')
export class RouterLinkReplaceClass {
  // Add class `my-active` when `myActiveClass` is `true`
  @HostBinding('class.my-active') 

  // Read state of `router-link-active` class
  @Input('class.router-link-active') 

  myActiveClass: bool = false;
}

Take a look at a Plunker example here

For more information, visit this Stack Overflow discussion

Update:

Since myActiveClass does not update when the router-link-active class is added or removed, I have made modifications to the directive to obtain information about the active route in a similar manner to the RouterLink directive:

import {ROUTER_DIRECTIVES, RouteConfig, Router, Instruction} from 'angular2/router';

@Directive({
  selector: '[routerLink]'
})
export class RouterLinkReplaceClass {

  //@Input('class.router-link-active')
  // myActiveClass: boolean = false;
  private _navigationInstruction: Instruction;
  @Input('routerLink')
  private _routeParams: any[];

  constructor(private _router: Router) {
    // Update the link whenever a route changes
    this._router.subscribe((_) => this._updateLink());
  }

  private _updateLink(): void {
    this._navigationInstruction = this._router.generate(this._routeParams);
  }

  @HostBinding('class.my-active')
  get isRouteActive(): boolean {
    return this._navigationInstruction ? this._router.isRouteActive(this._navigationInstruction) : null;
  }
}

Answer 3

Answer №2

After reviewing Günter Zöchbauer's solution, I have successfully implemented it following the angular2 rc1 breaking changes.

import { Directive, Input, HostBinding, OnInit } from '@angular/core';
import { Router, RouteSegment, UrlTree } from '@angular/router';

@Directive({
    selector: '[routerLink]'
})
export class ActiveRouterClass implements OnInit {
    private currentUrl: UrlTree;
    @Input('routerLink') private routerLink: any[];

    constructor(private routeSegment: RouteSegment, private router: Router) {
        this.router.changes.subscribe(() => this.updateCurrentUrl());
    }

    private updateCurrentUrl(): void {
        this.currentUrl = this.router.createUrlTree(this.routerLink, this.routeSegment);
    }

    @HostBinding('class.active')
    get isLinkActive(): boolean {
        return this.currentUrl ? this.router.urlTree.contains(this.currentUrl) : null;
    }

    ngOnInit() {
        this.updateCurrentUrl();
    }
}

Answer 4

After reviewing Günter Zöchbauer's solution, I have successfully implemented it following the angular2 rc1 breaking changes.

import { Directive, Input, HostBinding, OnInit } from '@angular/core';
import { Router, RouteSegment, UrlTree } from '@angular/router';

@Directive({
    selector: '[routerLink]'
})
export class ActiveRouterClass implements OnInit {
    private currentUrl: UrlTree;
    @Input('routerLink') private routerLink: any[];

    constructor(private routeSegment: RouteSegment, private router: Router) {
        this.router.changes.subscribe(() => this.updateCurrentUrl());
    }

    private updateCurrentUrl(): void {
        this.currentUrl = this.router.createUrlTree(this.routerLink, this.routeSegment);
    }

    @HostBinding('class.active')
    get isLinkActive(): boolean {
        return this.currentUrl ? this.router.urlTree.contains(this.currentUrl) : null;
    }

    ngOnInit() {
        this.updateCurrentUrl();
    }
}

Modifying the standard name of the "router-link-active" class through the creation of a personalized directive to include a different class

Answer №1

Answer №2

Similar questions

Having trouble with your Typescript *.ts files?

A click function within a cell should not initiate a click function within a row

Display different icons in an Angular application based on the value received from an API in real

Issues with implementing PrimeNG Data List component in Angular 4

Steps for transferring an uploaded .CSV file to a Web service

Setting a property with a generic type array: Tips and tricks

Can semicircles be created using Leaflet and Angular together?

How to dynamically load a component in Angular 7 with the click of a button

A TypeScript object with user-defined keys

The expression "routerlink" in Angular 9 is not recognized,

Encountered a problem when trying to show a PDF viewer within a Bootstrap modal

Guide on creating a zodiac validator that specifically handles properties with inferred types of number or undefined

Retrieving the selected value from a <select> element when it changes

Tailored directory layout for Angular CLI

Switch branches to projects without node_modules installed

Issue a tslint warning when mockResolvedValueOnce is used with async/await

Executing a function in the Angular 5 template based on the results of an observable leads to multiple function calls

The icon for caret down in FontAwesome is not displaying when using ngClass

Discover the pixel width of a Bootstrap grid row or container using JavaScript

Unable to locate the type definition file for 'jquery'