Cómo establecer el color del elemento activo en mat-nav-list en angular 6

Solución:

Esto se puede hacer si está utilizando Angular Router con el routerLinkActive atributo.

De la documentación para el RouterLinkActive directiva:

Le permite agregar una clase CSS a un elemento cuando la ruta del enlace se activa.

Descripción

Esta directiva le permite agregar una clase CSS a un elemento cuando la ruta del enlace se activa.

Considere el siguiente ejemplo:

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

Cuando la URL es /user o /user/bob, la clase de enlace activo se agregará a la <a> etiqueta. Si la URL cambia, la clase se eliminará.

El siguiente código muestra un caso de uso típico:

<mat-nav-list>
  <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">Home</a>
  <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">Settings</a>
  <a mat-list-item routerLink="/about" routerLinkActive="active-list-item">About</a>
</mat-nav-list>

.active-list-item {
  color: #3F51B5 !important; /* Note: You could also use a custom theme */
}

Un par de notas:

• Tu puedes cambiar active-list-item a cualquier nombre de clase que le gustaría que se aplique.
• los !important La declaración en el segundo fragmento de código se usa ya que los estilos de elementos de la lista tienen prioridad sobre sus estilos personalizados.

Aquí tienes un Stackblitz.

En Angular Materials 9.0 tienes que cambiar el color para la siguiente clase:

a.mat-list-item.active { color: #ccc; }

---

---

Utiliza Nuestro Buscador