routerLinkActive id coupled with [ngClass]

Question

Below web-link demonstrates the routerLinkActive id working when used as a boolean value for a distinct HTML element' [ngClass]
https://stackblitz.com/edit/routerlinkactivesimple?file=src%2Fapp%2Fapp.module.ts

In contrast the routerLinkActive id is not working with @angular/material instance below web-link, but the error disappears by commenting lines 5 and 6 , however not rectifying the usability of routerLinkActive id: https://stackblitz.com/edit/mat-routerlinkactive?file=src%2Fapp%2Fnav%2Fnav.component.html

Answer 1

your second link has a lot of issues, the app-nav is not even used, so "commenting lines" is not enough to make it work..

but anyway

there is no issue with routerLinkActive, the problem is :

<button mat-button color="white" fxHide.xs *ngIf="true">
  <span>
    <a routerLink="city-list" routerLinkActive="active-link citNgClassList" #rla_clist="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}">
      <mat-icon class="mr">maps_home_work</mat-icon>
      Cities
    </a>
  </span>
</button>

your link is inside a button.. remove the button, keep the "a" and it works

and what's the point of *ngIf="true" ?

Edit : you can keep the button and remove the 'a' if you want to keep the button style (but it's bad usability wise to display link as button..), just put routerLink, routerLinkActive & routerLinkActiveOption on the button directly

Answer 2

Thanks, JiBi , for your observations. Indeed stripping off the material button wrapper of the links does not longer gives an error on the second StackBlitz link line 5 span , but it hurts to the over all page with styling in a bad way that breaks the harmony of the page that is not easy to substitute. I have removed some of the comments , that were left in place to give an easy idea of what I have tried. The *ngIf= "true" of the buttons was meant to be a *ngIf= "!rla_clist" or *ngIf= "!rla_cform" so the button sender to the link will not displayed if I am on the link itself ,.....but this is another problem of which better solution I am awaiting.