Components: Active style for mat-nav-list

[calebegg]

There's a theme-specific active style for navigation items in a nav drawer:

https://material.io/design/components/navigation-drawer.html#standard-drawer

(Note the way "inbox" is highlighted, because that's the section we're currently in).

However, there's no way to achieve this style in Angular Material. Ideally, there'd be a way to do this with routerLinkActive on a mat-nav-list.

[Robinyo]

A work around, .html:

      <mat-nav-list>

        <h2 matSubheader>{{ 'MY_WORK' | translate }}</h2>

        <a *ngFor="let item of items"
           mat-list-item
           (click)="sidenav.close()"
           routerLinkActive
           #routerLinkActiveInstance="routerLinkActive"
           [attr.tabindex]="routerLinkActiveInstance.isActive ? 0 : -1"
           [class.list-item-active]="routerLinkActiveInstance.isActive"
           [routerLink]="[item.route]">
          <mat-icon matListIcon class="nav-list-icon">{{item.icon}}</mat-icon>
          {{item.title}}
        </a>

        ...

      </mat-nav-list>

theme.scss:

@import '~@angular/material/theming';

@import "./material.icons";

@include mat-core();

$primary: mat-palette($mat-blue-grey, 700);
$accent:  mat-palette($mat-deep-orange, 500, A100, A400);
$warn:    mat-palette($mat-red, 600);

$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

.list-item-active {
  font-weight: bold;
  color: mat-color($accent, darker) !important;
}

[dannye]

@Robinyo Thanks for your example, it works great for my needs
What is this line for?
[attr.tabindex]="routerLinkActiveInstance.isActive ? 0 : -1"
It doesn't seem to have an impact

[Robinyo]

It's responsible for highlighting the 'selected' item when you navigate away from and then return to the menu.

Without that line the first item in the list will always be highlighted, for example: https://teradata.github.io/covalent/#/docs

[dannye]

Oh I see now. But that makes the items in the list un-tabbable, which seems like a shame.

I think it's better to have the "active" css rule specify a background color for the active item (rgba(0, 0, 0, 0.12) for the light theme, rgba(255, 255, 255, 0.12) for the dark theme, to try to stay consistent with mat-selects)

To avoid the first item being highlighted, I've always had a <a mat-list-item routerLink="/" style="height: 0;"></a> at the start of my mat-nav-list

[Robinyo]

Yes, that will work:

    <mat-nav-list>

      <h2 matSubheader>{{ 'MY_WORK' | translate }}</h2>

      <a mat-list-item routerLink="/" style="height: 0;"></a>

      <a *ngFor="let item of myWorkRoutes"
         mat-list-item
         (click)="sidenav.close()"
         routerLinkActive
         #routerLinkActiveInstance="routerLinkActive"
         [class.list-item-active]="routerLinkActiveInstance.isActive"
         [routerLink]="[item.route]">
        <mat-icon matListIcon class="app-nav-list-icon">{{item.icon}}</mat-icon>
        {{item.title}}
      </a>

      ...

    </mat-nav-list>

.list-item-active {
  font-weight: bold;
  color: mat-color($accent, darker) !important;
  background: rgba(0, 0, 0, 0.04);
}

[philip-firstorder]

Or a simpler way using 1 line instead of 3:

<a *ngFor="let item of myWorkRoutes" (click)="sidenav.close()" mat-list-item [routerLink]="[item.route]" routerLinkActive="list-item-active"> <mat-icon matListIcon class="app-nav-list-icon">{{item.icon}}</mat-icon> {{item.title}} </a>

[Robinyo]

@philip-firstorder

Thanks :)

See: nav.component.html