11

I am new to angular 6 ,here I have a mat-toolbar with mat-sidenav .Everything is working well but I want to set a color for the active item in side nav menu.

currently I have BLACK background I want to set a color when I select the item in the mat-nav-list and also I tried to set mat-divider between each item that also not working .

app.component.html

<mat-sidenav-container class="sidenav-container">

  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black"> //current background is black
    <mat-toolbar class="menuBar">Menus</mat-toolbar>
    <mat-nav-list>
      <a class="menuTextColor" mat-list-item href="#">Link 1</a> // want to change the color of the selected item.
      <a class="menuTextColor" mat-list-item href="#">Link 2</a> // want to set divider between each item
      <a class="menuTextColor" mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar class="toolbar">
      <button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span class="toolbarHeading">Demo App</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>

</mat-sidenav-container>

Can anyone help me to fix this .

Zhu
  • 3,679
  • 14
  • 45
  • 76

3 Answers3

21

This can be done if you're using Angular Router with the routerLinkActive attribute.

From the documentation for the RouterLinkActive directive:

Lets you add a CSS class to an element when the link's route becomes active.

Description

This directive lets you add a CSS class to an element when the link's route becomes active.

Consider the following example:

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

When the URL is either /user or /user/bob, the active-link class will be added to the <a> tag. If the URL changes, the class will be removed.

The code below showcases a typical use case:

<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 */
}

A couple of notes:

  • You can change active-list-item to whatever class name you would like to be applied.
  • The !important declaration in the second code snippet is used as the list item styles take precedence over your custom styles.

Here's a Stackblitz.

Community
  • 1
  • 1
Edric
  • 24,639
  • 13
  • 81
  • 91
  • In a modal informational window I have a sidenav and items. Just wondering how to set without routerLink. Thanks!!! – aswininayak May 24 '19 at 12:41
2

In Angular Materials 9.0 you have to change color for following class:

a.mat-list-item.active { color: #ccc; }
Kacpers
  • 173
  • 3
  • 6
1

hope I'm not too late for this one. I had same problem with mat-nav-list and mat-menu so with few lines of css I could make it function as I wanted it, try it and see if it fits your needs, scss below:

[class^='mat-list-'] {
  &:hover:active {
    background: rgba(255, 255, 255, 0.04);
  }
  &:focus,
  .mat-list-text {
    background: none !important;
  }
}

[mat-menu-item].is-active,
[mat-list-item].is-active {
  background: hsla(0, 0%, 100%, 0.1) !important;
}

Now I have custom dark theme so you might want to set colors after your choice. Just add routerLinkActive="is-active" and you are set to go.

/Best regards

Boris Pancisek
  • 23
  • 6