What is the best way to create a highlighted navigation bar using Angular 2?

Is there a way to keep the navbar active even after refreshing the page in Angular 2? I am currently using CSS to accomplish this, but the active tab is removed upon page refresh. Any suggestions on how to tackle this?

 HTML:--


<ul class="nav navbar-nav navbar-top "
                    *ngFor="let menu of menus">
                    <li><a href="" (click)="goToPage($event)">{{menu}}
                    </a>
                    </li>
                </ul>

css:--

.navigation a:focus {
    box-shadow: 0 -5px 0 -4px #eee;
    color: #ffffff;
    width:30%
}

.navigation a:hover {
    box-shadow: 0 -5px 0 -4px #eee;
    color: #ffffff;
    width:30%
}

Answer №1

Implementing routerLinkActive allows you to incorporate specific CSS styles for your active route. Here is an example:

<a routerLink="dashboard" routerLinkActive="selected">Dashboard</a>

Answer №2

<ul class="nav navbar-nav navbar-top" *ngFor="let item of items">
     <li>
         <a routerLink="item"  routerLinkActive="active">{{item}}</a>
     </li>
</ul>

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 both an X button and hamburger menu is essential in my Bootstrap design, especially since I am working with React.js

Currently, I am working with the most recent version of Bootstrap and aiming to switch between the recognizable X icon and a hamburger menu. It seems like these two icons are overlapping each other, and I'm unsure if I can modify the default 3 lines o ...

Allow frontend JavaScript to retrieve a text file that is restricted to individual users

Trying to articulate my goal is challenging, but I'll do my best to clarify. My objective is to enable JavaScript (or an alternative solution) to retrieve data from a text file on a static site and utilize that data in some way. The challenge here is ...

What is the best way to retrieve information from multiple pages of my REST API?

Recently, I integrated a search engine into my application and now I need to gather all the data available for a particular resource, such as all the posts made by a user. The response I receive from my API looks something like this: { "count": 2, ...

Check to see if the ContentEditable div is currently focused

I'm struggling to determine if a contenteditable div has focus with my current code. Here is what I have so far: if ($("#journal-content:focus")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); } The issue I'm encounter ...

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

Activate search bar by clicking on it

I am currently attempting a basic jQuery example to expand a search bar on mouse click, but for some reason, my code is not working as expected. I have a simple jQuery function to display the input field when the button with the class "expand" is clicked, ...

Breakpoint for mobile menu in FoundationCSS

When the browser is resized, the mobile menu appears at 568x320, which is the default breakpoint. https://i.sstatic.net/ZSbiq.jpg I would like to create a breakpoint around 900px to address the issue with the menu being too large as shown in the image be ...

The process of making a pop-up modal instead of just relying on alerts

Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...

Steps to make the placeholder in an MUI TextField component move to the top of the box instead of staying within the border:

I'm working on styling a text field in MUI to achieve the look shown in the image below: https://i.sstatic.net/JHhpf.png However, my current implementation looks like this: https://i.sstatic.net/5N7hH.png Currently, when I click inside the text fi ...

What is the best way to update the value of a Material Angular select to match its label in TypeScript?

Is there a way to reset the value of this select element back to <mat-label>Select Member</mat-label> in TypeScript when a specific event occurs? I am currently unable to find a solution on the TypeScript side. Any advice would be appreciated ...

Mapping two objects of the same shape to each other recursively using TypeScript

I receive regular data from a specific source. This data consists of nested objects containing numerical values. For example: { a: 1, b: { c: 2, d: 3.1, }, } My objective is to organize this data into multiple TimeSeries objects of the same struct ...

NodeJS can be used to convert JSON data into an XLSX file format and allow for

I am currently working on a project in nodejs where I need to convert JSON data into XLSX format and then download it to the client's browser. I have been using the XLSX npm module to successfully convert the JSON data into a Workbook, however, I am f ...

Encountering "Angular Reactive forms - FormArray - Unable to locate control with specified path" error upon initial loading

Encountering some Cannot find control with path errors while attempting to utilize a basic Reactive Form and FormArray. Component.ts ngOnInit() { this.newForm = this.fb.group({ currencyExchangex: this.fb.array( [this.fb.group({ rateNumeri ...

Add a module to the main module or main component within the project

I have integrated a third-party library to manage the layout of my Angular application. I am considering importing it either in app.module.ts (the root module) or in app.component.ts (the root component). Do you think there would be any significant diff ...

Concealing the side navigation menu with HTML and CSS

Hey there, I'm trying to make my navbar automatically hide when the mouse is moved. I found an example that I want to use here. Despite reading some online documentation, I just can't seem to figure out how to do it. Here's a snippet of my c ...

The process of downloading a webpage onto a computer is not completely successful

I recently created a webpage on WIX and attempted to download it using CTRL+S. However, when I loaded the site from my computer, certain elements were not functioning properly. Is there a specific piece of code that is missing when saving the webpage in th ...

Error message: "Unidentified variable in the code snippet from MUIv5 sample."

Achieving the Objective To implement a drawer sidebar in MUI5 that can be toggled open and closed by the user, I am exploring the documentation for the Drawer component as well as referencing an example. Encountering an Issue Upon copying the code from ...

Steps for activating Brotli compression in Nginx and Docker for an Angular Application

For my Angular application using Docker, I have implemented Brotli compression on Nginx by adding commands to the Dockerfile and enabling brotli in the nginx/default.conf file. nginx/default.conf: server { brotli on; brotli_static on; listen ...

Create a stylish design with Bootstrap 3.0 featuring a full-width color background and compact columns perfectly centered on the

As I ventured into creating a business theme with stripes, akin to the one developed by W3Schools and accessible here, I encountered a particular challenge. The layout consisted of horizontal sections with varying background colors. My main concern was th ...

Font may seem more slender in Firefox and Safari compared to Chrome where the appearance is impeccable

I am currently working on achieving consistent font appearance across Mac Chrome, Safari, and Firefox (IE compatibility to be addressed later). My experiments have included: -webkit-font-smoothing: subpixel-antialiased; The font appears almost identica ...