Could routerLinkActive be used to substitute a class rather than simply appending one?

I have a navigation bar icon that links to an admin route. I want this icon to change its appearance when on that specific route. To achieve this, I can simply replace the mdi-settings-outline class with mdi-settings, displaying a filled version of the same icon.

<li class="nav-item">
    <a routerLink="/admin" routerLinkActive="mdi-settings" class="nav-link mdi mdi-settings-outline"></a>
</li>

However, the standard behavior of the routerLinkActive directive is to only add the mdi-settings class to the link, which does not produce the desired effect. Is there a way for the routerLinkActive directive to replace the class instead of just adding it?

cssangularangular2-directivesangular-router

Answer №1

Utilizing the routerLinkActive functionality provides access to various properties within the template. To tap into this API, assign the directive to a template variable by including #link="routerLinkActive", where "link" serves as the designated variable.

Subsequently, you can leverage the directive's properties as outlined in the accompanying API documentation.

https://angular.io/api/router/RouterLinkActive#properties

<li class="nav-item">
    <a routerLink="/admin" 
       routerLinkActive="mdi-settings"
       #link="routerLinkActive"
       class="nav-link mdi"
       [class.mdi-settings-outline]="!link.isActive"
    ></a>
</li>

Answer №2

Ensure each link has a unique variable assigned

    <a mat-list-item
       [routerLinkActive]="['']"
       [routerLinkActiveOptions]="{ exact: true }"
       #reportsLink="routerLinkActive"
       [ngClass]="reportsLink.isActive ? 'route-active': 'route-inactive'"
       [routerLink]="['/reports']"
       title="Reports">
    </a>
    <a mat-list-item
       [routerLinkActive]="['']"
       [routerLinkActiveOptions]="{ exact: true }"
       #notificationsLink="routerLinkActive"
       [ngClass]="notificationsLink.isActive ? 'route-active': 'route-inactive'"
       [routerLink]="['/notifications']"
       title="Notifications">
    </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

Could not find the element using the specified cssSelector

I am attempting to locate and interact with this specific div element. <div class="leaflet-marker-icon marker-cluster marker-cluster-small leaflet-clickable leaflet-zoom-animated" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; o ...

csswebdriverselenium-webdriver

What is the best way to position the section and footer to the left side of the sidenav?

I am relatively new to the world of html and css, trying my hand at constructing html layouts. I have encountered a bit of trouble in aligning the footer and section to the left of the nav bar. No matter what percentage widths I use, they always end up ove ...

htmlcss

Tips for enabling selection of list items in an input tag

Below is the code I have written to create an InputFilter. MyFilter = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable = '<input type="text" id="myInput" on ...

javascripthtmlcss

Using Angular 2: A Beginner's Guide to Navigating with the Latest Angular 2.0.0-rc.1 Router

As I embarked on a new Angular 2 project, I was puzzled to discover that I inadvertently installed two different versions of the angular router: "@angular/router": "2.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.1", Despite my best efforts, I co ...

javascriptangularangular2-routing

Why are the icon pictures not displaying in Angular's mat-icon-button?

Recently, I stumbled upon a snippet of code in an Angular project that caught my eye. Naturally, I decided to incorporate it into my own program: <div style="text-align:center"> <a mat-icon-button class="btn-google-plus" href="http://google.com ...

htmlangularbuttoniconsangular-material2

There is a slight gap between the svg element and the path

Here is the size of my path tag (g tag is same size) This is the size of my SVG tag There is a gap between them. These are the inline attributes... <svg preserveAspectRatio="none" class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-base ...

htmlcsssvg

Chaos in the IE8 drop-down menu situation

I'm having trouble with my code for a menu with drop-downs in ie8. It works fine in all other browsers but there seems to be an issue with the positioning of the main menu and submenus. Any thoughts on what might be causing this? <ul id="nav" clas ...

htmlcssdrop-down-menumenuinternet-explorer-8

Angular2 Uniqueness Validator: Ensuring Data Integrity

Within my Angular2 form field, I am trying to ensure that the inputted value does not already exist. The challenge lies in accessing instance members within my custom validator function, codeUnique(). Upon execution, "this" refers to either FormControl o ...

angulartypescript

Use flex to position a div at the center of the screen

Looking for some guidance on using flex as a newbie here. Currently working on designing a website page and struggling with centering a div tag on the page using flex. Appreciate any assistance or advice you can provide. Thank you! ...

htmlcssflexbox

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...

javascriptjqueryhtmlcss

Ways to align text within a table cell on a background using CSS

I'm attempting to print jukebox strips with designated corner markings. The code I have written generates the HTML page for displaying the strips, allowing users to then print them. Jukeboxes typically feature selection buttons labeled ABCDEFGHJK and ...

htmlcss

Tips for transforming a JSON Array of Objects into an Observable Array within an Angular framework

I'm working with Angular and calling a REST API that returns data in JSON Array of Objects like the example shown in this image: https://i.stack.imgur.com/Rz19k.png However, I'm having trouble converting it to my model class array. Can you provi ...

jsonangulartypescriptobservablehttpclient

Alignment issue with React JSX background position; image not centered on the right in Material UI Grid item

I've recently completed a single-page website portfolio, but I'm encountering an issue with setting the background position of the home screen to center right. You can view my site here: Here is the link to my repository: https://github.com/Bolm ...

cssreactjsmaterial-uijsx

Execute functions when switching between tabs rather than displaying their content - ClrTabs

I am looking to utilize the ClrTabs component for controlling an iframe's content with JavaScript. The goal is to switch between different views inside the iframe by clicking on corresponding ClrTab elements. I am having trouble figuring out how to ha ...

angulareventsvmware-clarity

How to modify the background color of a <td> element using CSS and PHP

I am working on a PHP code snippet that populates a table from a MySQL database. <?php while($res = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>".$res['id']."</td>"; ...

phphtmlcss

Steps to implement the click functionality on the alert controller and modify the language in Ionic 4

I am currently developing a multilingual Ionic 4 app and have implemented the alert controller to display language options. However, I am facing an issue on how to dynamically change the language based on user selection. Below is my app.component.ts code ...

angularionic-frameworkionic4

Steps to customize the appearance of a button within a file input field

When implementing the file input in my code on a Mac, I noticed that the alignment appears off. On all other devices, it looks just fine. However, when I try to apply a style specifically to the 'Choose file' button, the style also gets applied t ...

htmlcssalignment

Minify and group options available for asset managers specifically designed for traditional HTML websites

My primary focus is on working with the CakePHP framework and utilizing a fantastic plugin that minifies and groups selected assets into a single file, reducing the number of HTTP requests needed for the entire site. Currently, I am collaborating with des ...

jqueryhtmlnode.jscsscakephp

Enhance each category changing with jQuery page transitions

Is there a way to add page transitions based on category names and quantities in PHP? For example, when clicking on the "office" category, can a popup overlay be displayed with the category name and quantity while the content loads? The focus is on creat ...

javascriptphpjquerycss

Determining the dimensions of a div with a scrollbar using Jquery

Is there a way to get the width and height of a div with scroll that includes both visible and hidden content using JQuery? If anyone has a solution for getting these values, please share. <div id="area" class="divLeftCem area"> <div id="pan ...

javascriptjqueryhtmlcss