shifting the angular directives to alternate the bootstrap class of hyperlinks

I have a collection of hyperlinks displayed on my webpage.

<a href="#" class="list-group-item list-group-item-action active" routerLink='/route1' >Explore First Link</a>
<a href="#" class="list-group-item list-group-item-action" routerLink='/route2' >Discover Second Link</a>
<a href="#" class="list-group-item list-group-item-action" routerLink='/route3' >Navigate Third Link</a>

The first link is highlighted with the "active" class. When any of the links are clicked, certain actions occur, however, the first link remains in the active state. How can I dynamically transfer the active class to the corresponding link that is being clicked?

htmlangularclasshyperlinkbootstrap-4

Answer №1

Try using the routeLinkActive directive in the following manner:

<a href="#" class="list-group-item list-group-item-action"  routerLinkActive="active" routerLink='/route1' (click)="setActiveItem('first')">Click here for the first link</a>
<a href="#" class="list-group-item list-group-item-action"  routerLinkActive="active" routerLink='/route2' (click)="setActiveItem('second')">Click here for the second link</a>
<a href="#" class="list-group-item list-group-item-action"  routerLinkActive="active" routerLink='/route3' (click)="setActiveItem('third')">Click here for the third link</a>

Answer №2

One way to dynamically switch the active element is by using ngClass:

You can refer to the Angular documentation for NgClass here.

To achieve this, you need to add the (click) action to each a element, and then call a function that will set the active element accordingly:

<a href="#" class="list-group-item list-group-item-action" [ngClass]="{'active': activeItem === 'first'}" routerLink='/route1' (click)="setActiveItem('first')">First Link</a>
<a href="#" class="list-group-item list-group-item-action" [ngClass]="{'active': activeItem === 'second'}"routerLink='/route2' (click)="setActiveItem('second')">Second Link</a>
<a href="#" class="list-group-item list-group-item-action" [ngClass]="{'active': activeItem === 'third'}" routerLink='/route3' (click)="setActiveItem('third')">Third Link</a>

In your TypeScript file, define and initialize the variable:

activeItem: string;

// Function to update the active item
setActiveItem(activeItem: string): void {
  this.activeItem = activeItem;
}

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

When building with Angular using the "ng build" command, the JavaScript file names are altered

I'm currently learning Angular and I've noticed that when creating a new project with Angular CLI, files like runtime.js, polyfills.js, main.js, styles.css are generated. However, after running the ng build command, similar files can be found in ...

javascriptangularexpress

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

For my Sharepoint 2010 application, I have been utilizing jQuery to handle most events on the client-side. However, when it comes to saving data to the Sharepoint list and generating a PDF file with that data, I need to switch to server-side processing usi ...

c#jqueryhtmlsharepoint-2010

The TypeScript find() method on an array are showing an error message that says, "There is no overload that matches this call

Issue Description I encountered a problem while using TypeScript's find() method for an array. Whenever I input a value, it does not work properly and displays an error message stating, "No overload matches this call". Code Snippet addOption(event: ...

arraysangulartypescript

Tips on sending component values to Host Listener in Custom Directives using Angular 2

I am looking to transmit model values from my HTML template to a custom directive: @Directive({ selector: '[eventlistener]' }) export class EventListener { @Input() value:string = 'Not Defined'; @HostListener('click& ...

angularangular2-template

Authenticate through Twitter when using PhoneGap Cordova

Looking to implement Twitter login in my application using JavaScript and HTML. How can I redirect users to the Twitter login page when they click on the "Sign In with Twitter" button? ...

javascriptandroidhtmlcordova

Dynamic div with height controlled by the content of the background image

I'm trying to figure out how to make a div with a background image of 100% width always maintain the aspect ratio of the image for its height. Is there a way to achieve this? In simpler terms, when I resize the page, I want the div to scale down whil ...

htmlcss

Tips for transforming an SQL Server query into JSON format

I need to construct a table in a view utilizing the output of this particular SQL Query SELECT f.empresaid, e.fantasia AS Company, f.filialid, f.fantasia AS Branch, u.consultorid ...

htmljsonsql-serverasp.net-mvcview

Creating encoded objects for a content-type of `application/x-www-form-urlencoded`

Upgrading AngularJS Code to Angular 2+ - Http Issue I am in the process of converting some legacy AngularJS code (specifically Ionic 1) to the latest version of Angular (Ionic 4), and I've encountered a troubling issue. Previously, in every HTTP POS ...

angulartypescriptionic-framework

Angular4 ChromeDriver Selenium Protractor

I am facing an issue while trying to run 'ng e2e'. The error message I encounter is as follows: WebDriverError: unknown error: cannot find Chrome binary I am using Protractor which is pre-installed with Angular CLI. Despite reinstalling ChromeD ...

angularseleniumselenium-webdriverprotractorselenium-chromedriver

What are the ways in which Angular can offer assistance to Internet Explorer 9?

The news is out - the Angular team has just announced their support for Internet Explorer 9! This revelation has left me wondering, how is it even possible? Currently, I am an avid user of AngularJS and have dedicated time to studying its ins and outs. Fr ...

javascriptangularjsangularinternet-explorer-9

Utilizing Jquery tabs for consistent height display

Currently, I am utilizing jquery tabs for showcasing various content. This is what my functions look like: $(function() { $( "#tabs" ).tabs(); }); I attempted to ensure all tabs have the same height by using this approach: var heightStyle = ...

javascriptjqueryhtmlcss

The error message "NodeJS TypeError: Model is not a constructor" indicates that

I am facing an issue with my Angular5 app making requests to my NodeJS Api. Specifically, when I try to make a put request, it works the first time but throws an error on the second attempt saying that my Model is not a constructor. In my NodeJS backend, I ...

node.jsangularmongoose

Exploring the Secrets of JSON Parsing in Angular

In my Angular application, I have the following JSON: var alphas = { "Data": { "1" : { "abc": { "key1":"Value1", "key2":"Value2", ...

jsonangulartypescript

The server's file URLs are modified within the page source of a WordPress site

I've been attempting to integrate Adsense code into a WordPress blog at demonuts.com. I placed the Google code in the TEXT WIDGET provided by WordPress. However, upon running the website, I noticed that the URLs for .js, .css, or .png files are being ...

javascriptphphtmlcsswordpress

What is the location where UIWebView saves HTML5 offline files?

I'm curious about the location where HTML5 offline content is stored when saved from a UIWebView in an iOS app. Is it saved locally within my app's access, or somewhere else? ...

ioshtmluiwebviewoffline-caching

Http' does not have the 'update' property

I recently implemented Angular 2 Release and utilized 'Http' from '@angular/http' for my project. However, I encountered an error when I invoked the method 'update', which resulted in the following message: "Evidently, th ...

angulartypescriptangular-httpangular2-http

Mastering Data Transfer in jQuery: A Guide to Migrating Event Information from .on(dragstart) to

I need help with transferring information between an .on(dragstart) event and an .on(drop) event. However, when I run the code below in Chrome, I encounter an error message: 'Uncaught TypeError: Cannot read property 'test' of undefined' ...

javascripthtmljquery

Advancing the utilization of custom Angular input fields

I've developed a unique Angular input element that utilizes a textarea as its primary input field. Is there a way for me to pass along the enter key event to the main form? ...

javascriptangular

The content spills out of the container

I'm currently working with a div that displays scrolling text when it overflows. I am wondering if there is a way to hide the scroll bars until the text actually overflows? Additionally, is there a method to make the overflow occur only vertically and ...

jqueryhtmlcss

Express server does not send any response body

When a request is made to my express application, it returns an empty {}. const express = require('express'); const bcrypt = require('bcrypt'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyPar ...

htmlnode.jsexpress