routes - In Angular 9, how do you change the HTMl of a navigation link if you are on the URL it is pointing to?

Question

For my Angular 9, app, I have a simple app layout

<app-navbar></app-navbar>
<router-outlet></router-outlet>

The navbar component looks like

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <h1>My App</h1>
    <span class="menu-spacer"></span>
    <div>
      <a mat-button [routerLink]="'/'"> Home </a>
      <a mat-button [routerLink]="'/latest'"> Latest </a>
      <a mat-button [routerLink]="'/current'"> Items </a>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

I'm trying to figure out what the Angular way is to change the link to be just text instead of an anchor if the user is already on that page. What is the proper way to suppress the link generation and just have text if the URL matches what I want to route to?

question from:https://stackoverflow.com/questions/65889706/in-angular-9-how-do-you-change-the-html-of-a-navigation-link-if-you-are-on-the

Answer 1

Try this, i think this is what you are trying to do. Use routerLinkActive to specify the custom css class anchor-to-text

<a mat-button [routerLink]="'/'" routerLinkActive="anchor-to-text"> Home </a>

in your navbar component css file write our own css to make the anchor tag look like plain text

.anchor-to-text {
    cursor:text;
    color:inherit;
    text-decoration:none;
    pointer-events:none;
}