Чтобы установить постоянную цвета mat-list-item до щелчка по следующему элементу списка

Question

Я использую <mat-nav-list> компонент, в котором отображается <mat-list-item>, как показано на рисунке ниже:

Здесь, когда я нажимаю конкретный <mat-list-item> (например, «Домой 1»), я хочу изменить цвет текста на (Home 1) и этот цвет текста на постоянный, пока я не нажму на другой <mat-list-item> (например, «Домой 3»), Как это:

Как это сделать? Мне не хватает некоторых CSS, Вот ссылка stackblitz .

Answer 1

Для маршрутов вы можете использовать вот так

<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>

и в выборе css

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

вот slackBlitz url отметьте это