What is the best way to highlight the active link in my sidebar navigation bar when using material design in an Angular application?

<div class="mt-3">
  <mat-nav-list>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          SERVICES
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          BILLING
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          OIL TICKETS
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          MY TIME
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          APPROVE TIME
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          EMPLOYEE LIST
        </a>

Snippet from my Angular app's html navigation page. I want to highlight the active link but need help doing this with material design. Also, if there's a way to collapse it, that information would be appreciated. Thank you.

htmlcssangular

Answer №1

In the documentation for Angular's Routing and Navigation, it explains how to utilize the routerLinkActive directive.

<mat-nav-list>
   <a mat-list-item 
        routerLink="/paycard"
        routerLinkActive="active_route"> Paycard </a>
</mat-nav-list>

This code will apply the .active_route class to the current route, allowing you to customize its appearance:

.active_route {
  text-decoration: underline;
}

If your links are similar, consider using {pathMatch: full} in the router link options (for example, if you have routes like "/pay" and "/pay/card").

Answer №2

To implement routing within a tag, you can utilize the routerLinkActive attribute to apply a specific CSS class when the route is active.

In your scenario, it would be structured similar to the following example:

<a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'
routerLink="service" routerLinkActive="<css class for active state"> SERVICE </a>

If you require further information, visit this link.

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

The CSS code for creating a typing effect is not functioning properly

I'm having some trouble with a code snippet I wrote to create a typing effect on hover within a div. Here's the code: .about-panel:hover p { color: white; font-size: 1em; white-space: wrap; overflow: hidden; -webkit-animat ...

htmlcssweb

"What is the best way to display an image from a table and then enlarge it to full size when a button is clicked, all

1. Understanding the Concept In my page, I have a table listing various images with unique names that are successfully displayed in the table. My goal is to display the selected image in full screen within a popup window when a button is clicked. 2. Que ...

javascripthtmljquery

Issue with background positioning and floating in IE8 causing background display issues

There may be a simple mistake I'm making, as everything looks fine in Chrome/FF but breaks in IE8 (I haven't tested other versions). I have set a background for the body tag with a specified background position. Here is the HTML code: <!DOCT ...

css

Stop jQuery popups from wrapping text when resizing the browser window

Whenever a link is clicked, a jQuery popup appears. The popup functions properly in terms of opening and closing, but I would like to ensure that its position remains fixed when resizing the browser window to avoid any wrapping issues. Typically, I use a ...

javascriptjqueryhtmlcss

Generate an array by filtering out null properties from a Javascript/Typescript object

I have a TypeScript plain old JavaScript object (POJO) structured as shown below: export interface Items { firstName?: String; lastName?: String; address?: String; phoneNumber?: number; city?: String; stat ...

javascriptarraysangulartypescriptobject

How can an Angular 2 component detect a change in the URL?

My Angular 2 component subscribes to a service based on the URL hash without calling any subcomponents. I am wondering if I should use Route or Location for this scenario, and how can I listen for and react to a pop state event? ...

angularjsangularangular2-routing

What is the best way to search for a specific term in Visual Studio Code/IDE without including another term in the search results?

Is it feasible to search for instances in my code where the term "<img" appears without being accompanied by the term "alt="? This would help me locate all image tags that do not have the alt attribute. Can you provide guidance on how this can be achiev ...

htmlvisual-studiovisual-studio-code

Why does HTML validation matter after the webpage has finished loading?

After coming across an article recommending a workaround for a method that isn't considered strictly valid (using target="_blank") by using JavaScript to apply the rules after the page has loaded, I began contemplating if this approach is ethical. It ...

htmlw3c-validation

"Optimizing App Pool Performance with IIS Precache Event Monitoring

Our asp.net LOB web application is quite large. The issue we are facing is the delay of up to 10 seconds when the app pool is started or recycled, making the first page load slow. This results in users seeing a white page with a loading spinner until IIS ...

htmlasp.netasp.net-mvciisiis-7

Modifying the value of an animated status bar using the same class but different section

I need the status bars to work individually for each one. It would be great if the buttons also worked accordingly. I have been trying to access the value of "data-bar" without success (the script is able to process the "data-max"). However, the script see ...

javascripthtmljquery

What could be causing the AngularUI bootstrap datepicker to not appear?

Exploring the popup datepicker demo from angularUI bootstrap, which is embedded in their page and works perfectly. However, when I tried to create a minimal plunker here, the button click does not open the calendar. Any thoughts on what might be causing th ...

javascripthtmlangularjsangular-ui-bootstrap

Encountering the issue "Error: Uncaught PDOException - SQLSTATE[42000] - Syntax error or access violation: 1064"

I encountered an error that says: Uncaught PDOException: SQLSTATE[42000]: Syntax error or access violation: 1064. It seems to be a syntax error in my SQL statement. Can you help me figure out what's wrong with it? require_once "dbconnect.inc.php"; $e ...

phphtml

ArrangementGrid utilizing ngFor directive for rows and columns

Hi there, I am new to using Nativescript and I have encountered an issue with ngFor. Specifically, I am working with a GridLayout that contains a StackLayout inside of it and I need to set dynamic col and row values within the StackLayout. Can anyone pro ...

angularnativescript

Excessive image display | HTML and CSS synergize

I am having some trouble with my image gallery. Each image is displayed as a vertical column and has zooming effects when hovered over. Clicking on an image should show it in full screen with a caption. The problem arises when dealing with images that are ...

javascripthtmlcssimage

Divergent Appearance of Input Field in Chrome versus Firefox

After testing in Chrome and Firefox, I noticed that the input box appears larger than expected in Firefox. Below is the HTML markup: <div class="form-wrapper"> <input type="search" name="Ofsearch" placeholder="Search h ...

htmlcss

Ways to determine the current page I am viewing

I am working with a list of tabs and I need to track my current location every time I click on a specific tab. My MainCTRL controller, which is the parent of all tab controllers, needs to be aware of the active tab at any given moment. I attempted to use n ...

javascriptjqueryhtmlcssangularjs

Angular's array filter functionality allows you to narrow down an

I am working with an Array and aiming to filter it based on multiple criteria: primasSalud = [ { nombre: 'one', internacional: true, nacional: false, nacionalSinReembolso: false, nacionalClinicasAcotadas: false ...

arraysangulartypescript

How to position collapsible buttons in Twitter's Bootstrap framework

I have successfully created two buttons on the same line. The second button is collapsible and when clicked, it adds a row of two more buttons to the view. However, the newly collapsed row of buttons appears aligned with the second button. I would like th ...

jqueryhtmlcsstwitter-bootstrap

Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice ...

htmlcss

Created an HTML and PHP form, but struggling to pinpoint the issue

I created a form to send data to an email address. However, after filling out the form and submitting it, the browser displays the following message: Server error. The website encountered an error while trying to access http://localhost/process.php. Be ...

phphtml