Highlighting the selected value in an Angular Material mat option

I am looking to enhance the background color of the selected value when it is clicked. Unlike the example I found, which highlights multiple select values, I only want to highlight the selected value when choosing an option.

Check out this example for reference.

<hello name="{{ name }}"></hello>
<p>
  Default selection is Area 3. The array displayed below updates as options are chosen or deselected.
</p>
<div>
  Selected: {{ selectedOptions | json }}
</div>

<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
    <mat-list-option *ngFor="let tta of taskTypeAreas" [value]="tta.name">
      {{tta.name}}
    </mat-list-option>
</mat-selection-list>

app.css

p {
  font-family: Lato;
}

mat-list-option {
  margin: 10px;
}

mat-list-option[aria-selected="true"] {
  background: rgba(0, 139, 139, 0.7);
}

Answer №1

Using mat-selection-list for single value selection may not be the best choice, but if you still want to proceed, you can try implementing something similar to the following:

mat-list-option[aria-selected="true"] {
  background: blue;
}

Remember to clear your list every time a selection is made. Check out this example on StackBlitz for reference.

Answer №2

UPDATE: Considering the current options available in the mat-selection-list: https://material.angular.io/components/list/api

If you set [multiple]="false" and adjust the style of .mat-list-single-selected-option, it will highlight the currently selected mat-list-option

<mat-selection-list [multiple]="false">
  <mat-list-option>1</mat-list-option>
  <mat-list-option>2</mat-list-option>
  <mat-list-option>3</mat-list-option>
</mat-selection-list>
.mat-list-item.mat-list-single-selected-option {
  background: #FF0000;
}

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

Firebase initialization unsuccessful due to incorrect directory placement

I've been encountering an issue while deploying my Angular 2 project to Firebase. The initial deployment was successful, but subsequent attempts only show the Firebase Hosting welcome page instead of my project in the URL. I've realized that even ...

What is the best way to align navigation arrows vertically?

I am working on a modal album that displays images of various sizes. My issue is with styling the navigation arrows to appear in the center of the page, regardless of the image size. I have included my code below: <div class="row img-box"> <d ...

What could be causing the ngx-chart TreeMap labels to not display in IE11?

I am currently utilizing ngx-charts version 10.0.1 to create Treemap charts. My Angular version is 7.2.1. The chart functions as expected in Chrome, but the labels do not appear in IE11. Upon page load, I encounter the following errors in the IE console: ...

Utilize Mapbox-GL.JS to animate several points along designated routes

I'm encountering issues with the following example: Animate a point along a route My goal is to add another point and routes in the same map container. Here's what I've tried so far: mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t ...

Having trouble getting my HTML file and CSS styles to render properly in Chrome

Currently, I am in the process of developing a website and facing challenges with displaying CSS properties accurately. Despite seeking input from friends and users, my HTML file is not rendering as expected within various browsers such as Chrome, Edge, an ...

Angular version 2 has a directive called "ng2-nvd3" which seems to be undefined

I am attempting to incorporate a graph similar to the one shown in this Plunker example: Plunker Here is the corresponding code hosted on GitHub: GitHub However, I encountered an error: Uncaught (in promise): Unexpected directive value 'undefined ...

How can I align a sub-submenu horizontally using CSS?

I've built a nested menu using the ul/li tags, and I'm looking to align the second and third sub-menus horizontally with the first submenu. Here is my current visual layout: https://i.sstatic.net/4TctL.png, and this is what I want it to look lik ...

Will the identifier "id" be considered unique if the element with the matching id has its display property set to "none"?

Imagine you have a DIV element in your document with the id "row". Now, if you add another DIV with the same id and change the display property of the first DIV to "none", does the id of the second DIV become unique? ...

Angular 2 - Beginner's guide to updating the header when navigating to a new route or page

SOLVED I am faced with a challenge involving multiple components in Angular2. Specifically, I have the following components: home component, default header, detail component, and detail header component. Each header has a unique layout. At the Home pa ...

Guide for integrating CryptoJS with Angular 2 and TypeScript within a WebPack build setup

Looking for advice on integrating the CryptoJS library with Angular 2 using TypeScript? Many existing resources are outdated and assume the use of SystemJS. Can someone provide straightforward instructions for incorporating CryptoJS with Angular 2 and Type ...

Using jQuery to close a DIV with a delay

At the top of my website, I have set up an alert with a close button. The jQuery function for closing the alert is as follows: /* CLOSE ALERT BAR WITH BUTTON */ $('a.ctp-alert').click(function () { $("div.ctp-alert").slideUp(); }); While this f ...

using only css, create a centralized navigation bar without a fixed width

I managed to create a nav bar in the center (check out the link below), but for some reason there is a slight 2-3 pixel gap between each navigation element. Even though I have set both Margin and Padding to 0, the issue persists and I am unable to solve it ...

Implementing conditional rendering with styled-components

Currently, I am working on a menu that consists of a list of MenuItem components: <MenuItem>A</MenuItem> <MenuItem>B</MenuItem> <MenuItem>C</MenuItem> I am looking to customize the componen ...

Tutorial on declaring and initializing a variable within an HTML template in Angular

I have come across this question on Stackoverflow before, but the solutions provided did not work for me. I am attempting to iterate through a list of categories and items. I only want to display each category once, so I need to check if the current categ ...

What is the best way to implement pushstate degradation – using backbone.history or history.js?

I am interested in implementing pushstate functionality, which involves making an ajax request, changing the URL, and adjusting the browser history stack. However, since pushstate is not universally supported by all browsers, I need to find a workaround f ...

What is the best approach for managing and obtaining accurate JSON responses when working with PHP API and AngularJS 2 services?

Encountering a backend issue with MySQL, wherein one query is producing a specific dataset: {"candidat":[{"ID":1,"nom":"Danny","prenom":"Hariot","parti":"Quamba","departement":"Ukraine","commune":"Chapayeve"},{"ID":2,"nom":"Shari","prenom":"Adamkiewicz"," ...

The menu icon in the Bootstrap 5 navigation bar is not functioning on a specific webpage

I am facing an issue with my menu icon not working properly on mobile devices or when I try to inspect the page and run it on a responsive device. How can I resolve this problem so that users can click on the menu icon to view the navigation items? &l ...

Hover over, enter the mouse

On my FAQ and Question page, I want the answer to a question to be shown when a user hovers over it. However, currently all the answers are displayed when hovering over any question. This is not the intended functionality - only the answer to the selected ...

Looking for an element that includes "== $0" right after the closing tag in HTML can be done using Xpath, CSS, or any other locators in Selenium with Python

a link to an image <div class=""><div>Mumbai, Maharashtra</div></div> Take a look at the above example for guidance. I attempted to use the code below but it failed to produce results: driver.find_element(By.XPATH,'//di ...

Designing a component with Bootstrap-inspired flair

We are currently in the process of transitioning our ASPX CMS website to a new platform, and some of the retired pages will be hosted on a separate website under a subdomain. The new website will be utilizing Bootstrap 4.6, whereas our existing CMS site re ...