Modify the color of the chosen value on the sidebar using Angular 6

I am looking to update the color of the selected value in the sidebar.

Sample

<div class="card c-setting">
  <div class="card-header" title="Data Uploader"(click)="clickDataloader()">
  <a class="card-link" data-toggle="collapse" href="#collapseOne" >
     <span><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>  
     <span>Data Uploader</span>
  </a>
</div>

Angular Component

 clickDataloader(){
   this.DataUploader = false
   this.setting = true
   this.userManagement = true
   this.header = "Data Uploader"
 }
cssangularhtmltypescriptangular-forms

Answer №1

To modify the appearance of selected values, you can update the CSS within the .css file of the component.

/* unvisited value */
a:link {
 color: green;
}

/* visited value */
a:visited {
 color: green;
}

/* mouse over value */
a:hover {
 color: red;
}

/* selected value */
a:active {
 color: yellow;
}

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

Encountering an issue while trying to execute the command "ionic cordova build android --prod --release

Currently, I am facing an issue while trying to build my apk for deployment on the Play Store. The error message is causing a time constraint and I urgently need to resolve it. Any help or suggestions regarding this matter would be greatly appreciated. ...

androidcordovatypescriptionic-frameworkproduction

Revitalize access token with Keycloak in Javascript

I am currently working with keycloak-js version 8.0.1 and have a function called getToken that checks if the token is expired. If it is expired, the function refreshes it; otherwise, it returns the current token. The issue I am facing is that even though t ...

angulartypescriptkeycloak

What is the best way to determine the height of a DIV element set to "auto"?

When setting a fixed height on a div using jQuery, such as $('div').height(200);, the value of $('div').height() will always be 200. This remains true even if the content within the div exceeds that height and overflow is hidden. Is th ...

javascriptjquerycssheight

Center align an item using flex and absolute positioning

I am facing an issue with my carousel where I am trying to display text at the center of it both horizontally and vertically. I attempted to use the flex display property but did not achieve the desired outcome. .heroText { display: flex; position: ...

htmlcss

Modifying the state of one React component using another

Attempting to modify the state of one component using another component in ReactJs, however, being new to React. The parent component contains a state called: _SPCommandBarDisabled this.state = { _SPCommandBarDisabled: true } In a child component ...

javascriptreactjstypescriptwebpackstate

Storing a database row value into a PHP variable using an SQL query

I am encountering a number of questions related to my issue, but as a beginner in programming, I am struggling to understand most of the solutions. The code snippet below is the only one that works for extracting data from my table, although it is carrying ...

phphtmlsqlvariables

Infinite scrolling pagination feature in ag-grid not functioning properly with Angular

Upon the initial component load, all data appears as expected. However, when switching to the next page, the grid clears and an error is shown in the console: ERROR Error: ag-Grid: unable to draw rows while already drawing rows. It seems that a grid API ...

angularag-grid

I'm looking to redirect a 404 page in my PHP code - where is the best place to do so?

I found the correct code for redirecting 404 errors when a page is not found during redirection. However, I am unsure of where to implement this code in my PHP file. Should I place it within a specific tag on my home page? When I tried placing it at the ...

phphtmlhttp-status-code-404

Encountering a discord bot malfunction while on my Ubuntu server

My discord bot runs smoothly on my Windows 10 setup, but when deployed to the server running Ubuntu Server 20, it encounters a specific error. The issue arises when trying to handle incoming chat messages from the server. While I can read and respond to m ...

javascriptnode.jstypescriptdiscord.js

Any particular reason for Bootstrap v5 switching class names from .ml .mr to .ms .me?

I'm curious if anyone can explain the reasoning behind Bootstrap v5 changing the names of classes that are widely used? ...

cssbootstrap-4bootstrap-5

Efficiently process and handle the responses from Promise.all for every API call, then save the retrieved data

Currently, I am passing three API calls to Promise.all. Each API call requires a separate error handler and data storage in its own corresponding object. If I pass test4 to Promise.all, how can I automatically generate its own error and store the data in ...

javascriptreactjstypescriptasync-awaites6-promise

What is the best way to showcase nested array information within a form array in Angular2?

I recently incorporated FormGroup into my Angular 2 project to facilitate form rendering. For handling nested array data, I opted for formArray. form.component.html <div class="col-md-12" formArrayName="social_profiles"> <div *ngFor="let socia ...

jsonangularangular2-forms

Generating distinct identifiers for WebSocket and net.Socket connections

I am looking to assign unique identifiers to Websockets and net.Sockets so that each client can be identified by the identifier attached to the socket when a message is received. Previous findings: For WebSocket: Based on my research on Stack Overflow a ...

node.jstypescriptsocketswebsocket

Ensure that the nested div expands to the full height of the parent container div

I need my container div to expand in height to at least the full window height. If there is a lot of content inside the container div, I want it to exceed the window's height. This feature is working properly. Within the container div, I have placed ...

csshtml

How to find the position of the cursor on an ASP.NET page

While debugging my code, I successfully changed the cursor position with a timer. However, when I published and hosted it, the code stopped working. I implemented the following code and imported Windows.Forms for this child lock application. The purpose i ...

c#htmlasp.netmouse

Black and white emoji display on Windows 7 using Chrome and Edge browsers

To enhance the visual appeal of my website, I incorporate emojis using Emoji Unicode from https://www.w3schools.com/charsets/ref_emoji.asp. It has come to my notice that on Android, Mac, and iPhone devices, users see colored emoticons while those on Window ...

phphtmlemojiemoticons

Implementing dynamic content loading using CSS and jQuery upon link/button activation

I'm facing an issue where I am attempting to align content to the left side of my screen to display a feed while also ensuring that the pushed content is responsive. Unfortunately, the feed is not visible and the content remains unresponsive. Is ther ...

jquerycss

Dynamic content alongside a stationary sidebar that adjusts in width

Attempting to create a switchable sidebar (toggling between short and long form) using bootstrap, multiple examples, and online resources. The width of the sidebar changes when toggled, and I want the content to appear next to it regardless of its length. ...

htmlcsstwitter-bootstrapcss-positionsidebar

Role-based dynamic layout

I am currently working on a website that requires user login functionality. To achieve this, I am utilizing materialise-css and Angularjs for the front-end development, while the back-end is powered by Java-Hibernate (as Spring is not an option in my case) ...

htmlcssangularjs

How can I guarantee consistent UTF-8 encoding in Nokogiri parsing, ERB templates, and encoding HTML files using Ruby?

After successfully parsing parts of a website, I encountered an issue with UTF8: get '/' do url = '<website>' data = Nokogiri::HTML(open(url)) @rows = data.css("td[valign=top] table tr") erb :muster I am now attempting ...

htmlrubyparsingutf-8nokogiri