To Change Text-Color in Mat-List-Option

To change text-color in mat-list-option

to style your selection in list components as

html

<mat-selection-list #linkList >
  <mat-list-option *ngFor="let link of links;index as i" (selectionChange)="selectionChanged(i)" [class.active]="selectedItem === i">
    <a mat-list-item> <span class="contact-names">{{ link }}</span> </a>
  </mat-list-option>
</mat-selection-list>

add these in ts file

  selectedItem:number = null;

      ....

  selectionChanged(i) {
      selectedItem = i;
  }

add these to css

.mat-list-item.active .contact-names{
  color: red;
}

slackBlitz url

Angular Material - Change color of mat-list-option on selected

You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.

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

Stackblitz Working Demo

Angular Material - change color of clicked mat-list-option

I am not sure but you can try using this

.mat-select-content, .mat-select-panel-done-animating {
     background: mat-color($background, card); 
}

to

.mat-select-content, .mat-select-panel-done-animating {
    background: mat-color($background, card);
    .mat-option {
        color : mat-color($foreground, text);
    }
}

for details, you can also check the following link
https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss

Change color of Angular Material component mat-list-option checkbox for checked background, frame and check mark

You can alter selection-list checkboxes with a different set of rules. Here I have changed the accent color checkboxes:

::ng-deep {

  .mat-accent .mat-pseudo-checkbox-checked,
  .mat-accent .mat-pseudo-checkbox-indeterminate {
    background: green;
  }

  .mat-accent .mat-pseudo-checkbox.mat-pseudo-checkbox-checked,
  .mat-accent .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
    border-color: blue;
  }

  .mat-accent .mat-pseudo-checkbox::after {
    color: red;
  }
}

https://stackblitz.com/edit/angular-ubma2v?file=src%2Fapp%2Flist-selection-example.scss

How to change font color of matautocomplete options

The global style.css is just a plain, non-Angular, or at least non-encapsulated style sheet. You should remove ::ng-deep so it would work.

---

Solution 1: Remove ::ng-deep in global style.css.

style.css (global)

.mat-option-text {
  color: red !important;
}

Sample solution 1 on StackBlitz

---

Solution 2: Place the styling rule in the CSS file for MatautocomComponent.

matautocom.component.css

::ng-deep .mat-option-text {
  color: red !important;
}

Sample solution 2 on StackBlitz

To set mat-list-item color constant until clicking the next list-item

For routes you can use like this

<mat-nav-list>
  <mat-list-item [routerLink]="['/home1']" [routerLinkActive]="['active']">
    <mat-icon [class.active]="selected" matListIcon>home</mat-icon>
    <a matLine>Home 1</a>
  </mat-list-item>

  <mat-list-item [routerLink]="['/home2']" [routerLinkActive]="['active']">
    <mat-icon matListIcon>home</mat-icon>
    <a matLine>Home 2</a>
  </mat-list-item>

  <mat-list-item [routerLink]="['/home3']" [routerLinkActive]="['active']">
    <mat-icon matListIcon>home</mat-icon>
    <a matLine>Home 3</a>
  </mat-list-item>

  <mat-list-item [routerLink]="['/home4']" [routerLinkActive]="['active']">
    <mat-icon matListIcon>home</mat-icon>
    <a matLine>Home 4</a>
  </mat-list-item>

</mat-nav-list>

and in selection css

.mat-list-item.active{
  color: red;
  //any styles you like to add
}

here is the slackBlitz url check this

Angular-Material, How to change color of selected mat-option

In your CSS-

::ng-deep .mat-select-value
{    
      color: green!important;  
}

Is this what you are looking for?

---

Related Topics