CODEWITHSUNDEEP
cssangularangular-material
PGH
PGH

Reputation: 2204

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

I am using <mat-nav-list> component in which <mat-list-item> is displayed as shown in below image:

enter image description here

Here when i click particular <mat-list-item> (eg Home 1), I want to change the text-color of (Home 1) and that text-color as to constant until i click another <mat-list-item> (eg Home 3), Like this:

enter image description here

How to do this? I am missing some css,Here is the stackblitz link.

Upvotes: 2

Views: 7239

Answers (1)

Akhi Akl
Akhi Akl

Reputation: 3941

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

Upvotes: 3

Related Questions