Deactivating the RouterLinkActive attribute based on certain conditions

When working with this straightforward menu item component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'nav-item',
  template: `
    <a [routerLink]="routeUrl" 
    routerLinkActive="active-link" 
    >
    </a>
  `
})

export class NavItemComponent {
  @Input() routerLinkActiveIsDisabled: boolean;
}

I am seeking a way for routerLinkActive to be selectively applied only on specific items.

How can I adjust the setup so that the routerLinkActive attribute is omitted when routerLinkActiveIsDisabled is set to true?

angulartypescript

Answer №1

When using the below template code, the attribute routerLinkActive will be added to its corresponding tag only if the value of routerLinkActiveIsDisabled is false (non-truthy value).

[attr.routerLinkActive]="routerLinkActiveIsDisabled ? null: active-link"

or

[attr.routerLinkActive]="routerLinkActiveIsDisabled ? null: 'active-link'"

Answer №2

One option is to utilize the following code snippet:

<a [routerLink]="routeUrl" 
[routerLinkActive]="{{classname if link is active}}" 
>
</a>

Alternatively, you can choose to implement *ngIf and create two separate "a" tags:

<a *ngIf="!routerLinkActiveIsDisabled"
[routerLink]="routeUrl" 
routerLinkActive="active-link" 
>
</a>

<a *ngIf="routerLinkActiveIsDisabled"
[routerLink]="routeUrl" 
>
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating Vaadin components into an Angular2-seed project

Hi there, I've been encountering an issue while trying to integrate Vaadin elements into my Angular2 seed project. The Vaadin team has recommended that I upgrade the systemjs.config.js file by specifying the path names for Vaadin elements like this: ...

angularvaadin

What could be causing scrollTo to function in my ClickListener but not in AfterViewInit?

I was pondering about why the code snippet below is functioning properly: scroll(){ window.scrollTo(0, this.ypos); // executes without any issues } And in my html.component: <button (click)="scroll()">Scroll</button> but the cod ...

javascripthtmlangularscrollto

How is it possible to utilize type assertions with literals like `false`?

When working in TypeScript, I came across an interesting observation when compiling the following code: const x = true as false; Surprisingly, this direct assertion is valid, creating a constant x with the value true and type false. This differs from the ...

typescript

Using Typescript to extract elements from one array and create a new array

I have a set of elements "inputData" , and it appears as follows : [{code:"11" , name= "test1" , state:"active" , flag:"stat"}, {code:"145" , name= "test2" , state:"inactive" , flag:"pass"}, {code1:"785" , name= "test3" , state:"active" , flag:"stat"}, .. ...

angulartypescriptfilterecmascript-6ecmascript-5

Outputting the square root of integers ranging from 4 to 9999

I'm looking to calculate the square root of all numbers up to 9999. Are there any ways to instruct the program to skip numbers that do not have a perfect square root? Below is the current code I am using: let i=1; for (i===1;i>=1 && i <10000;i ...

javascripttypescriptroot

Implementing child components in React using TypeScript and passing them as props

Is it possible to append content to a parent component in React by passing it through props? For example: function MyComponent(props: IMyProps) { return ( {<props.parent>}{myStuff}{</props.parent>} } Would it be feasible to use the new compone ...

javascriptreactjstypescriptnext.js

After updating to Angular 15, the web component fails to function properly on outdated versions of Chrome

Ever since upgrading Angular to version 15, my angular web component stopped functioning properly on Chrome 53. The issue seems to be related to the compilerOptions setting the target to ES2022. Upon checking the console, I am seeing the error message: Un ...

angulares2022

Tips for managing 'single click' and 'double click' events on a specific html element in typescript:Angular 2 or 4

My problem lies in the fact that both events are activated when I double click. For instance, I want distinct functionality to occur for each event trigger. <a (click)="method1()" (dblclick)="method2()"> Unfortunately, both method1() and method2() ...

angular

Discovering subtype relationships in JSON with TypeScript

Consider the scenario where there are parent and child typescript objects: class Parent { private parentField: string; } class Child extends Parent { private childField: string; } Suppose you receive a list of JSON objects for both types via a R ...

jsontypescriptpolymorphism

The console is showing an 'undefined' output in Angular. I am unable to retrieve the data for the front end display

I keep seeing "undefined" in the console after making an API call. Below is the code I'm using: component.ts this.activatedRoute.params.subscribe((params) => { this.thingId = params['thingId']; //console.log(this.thingId) }); this. ...

angular

How to pass data/props to a dynamic page in NextJS?

Currently, I am facing a challenge in my NextJS project where I am struggling to pass data into dynamically generated pages. In this application, I fetch data from an Amazon S3 bucket and then map it. The fetching process works flawlessly, generating a se ...

javascriptreactjstypescriptnext.js

Instructions for sharing information between two components within a single .ts file

Currently, I am facing a challenge while working with Angular 7. I have two classes defined in the same .ts file as shown below: import { Component } from '@angular/core'; @Component({ selector: 'app-component', template: ' ...

angularcomponents

Angular error: Unable to locate a distinguishing object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables like Arrays

Greetings everyone! I am currently exploring the openWeb API to retrieve some data. While I was able to successfully display the data in the console, I'm facing difficulties when it comes to actually presenting it on the screen. ERROR Error: Cannot f ...

angular

Tips for moving all elements from array2 to array1

I need assistance with a code snippet that involves pushing objects from array2 into array1. array1 = [{name:'first'}, {name:'second'}]; array2 = [{name:'third'}, {name:'fourth'}, {name:'five'}]; // Desir ...

arraysangular

The function "useLocation" can only be utilized within the scope of a <RouterProvider> in react-router. An Uncaught Error is thrown when trying to use useLocation() outside of a <Router>

When attempting to utilize the useLocation hook in my component, I encountered an error: import React, { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; import { connect } from 'react-redux'; import { ...

javascriptreactjstypescriptreact-routerreact-router-dom

Prisma - Modify a single resource with additional criteria

Is it feasible to update a resource under multiple conditions? Consider the tables below: +----------+----------+ | Table1 | Table2 | +----------+----------+ | id | id | | param1T1 | param1T2 | | param2T1 | param2T2 | | idTable2 | ...

node.jstypescriptprisma

Revoking TypeScript Compilation Files with Sublime Text

By mistake, I pressed CTRL + B and it created JavaScript files and source map files from Typescript. Is there a simple way to reverse this process? Sublime keeps generating/updating the JS files whenever I make changes to the Typescript files. My current ...

typescriptsublimetext3

Angular Form Styles by Formly

I am experimenting with Formly for Angular and PrimeNG for the first time. However, the provided example does not look good: https://stackblitz.com/edit/ngx-formly-ui-primeng?file=src%2Fapp%2Fapp.component.ts Here is the original example they provide: ...

angularprimengngx-formlyformly

Exploring the potential of lazy loading with AngularJS 2 RC5 ngModule

I am currently utilizing the RC5 ngModule in my Angular project. In my app.module.ts file, the import statements and module setup are as follows: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/plat ...

angulartypescriptlazy-loading

Exchange a TypeScript data type with a different one within an object

I am currently working with the following type definitions: type Target = number | undefined; type MyObject = { some: string; properties: string; id: Target; } I am trying to find a generic solution to replace instances of Target with number ...

typescripttypescript-generics