angularmat-tab

the function of the line under the current tab of "mat-group" in "mat-tab-nav-bar" (Angular)

I use the mat-tab-nav-bar instead of the mat-group because of the routing. But in the mat-group there was a "blue" line under the current tab. Is there a possibility in "mat-tab-nav-bar" to get the same function?

how do I have to add "border-bottom: blue;"

my code looks like this

<nav mat-tab-nav-bar>

  <a mat-tab-link routerLink="">Home</a>
  <a mat-tab-link routerLink="Login">User Login</a>
  <a mat-tab-link routerLink="Registration">User Registration</a>

</nav>


<router-outlet></router-outlet>
Solution

  • You are missing routerLinkActive, just place this code and it should work.

    <nav mat-tab-nav-bar>

  <a mat-tab-link 
   routerLink=""
   routerLinkActive 
   #rla1="routerLinkActive" 
   [routerLinkActiveOptions]="{exact:true}"
   [active]="rla1.isActive">Home</a>
  <a mat-tab-link 
   routerLink="Login"
   routerLinkActive 
   [routerLinkActiveOptions]="{exact:true}"
   #rla2="routerLinkActive" 
   [active]="rla2.isActive">User Login</a>
  <a mat-tab-link 
   routerLink="Registration"
   routerLinkActive 
   [routerLinkActiveOptions]="{exact:true}"
   #rla3="routerLinkActive" 
   [active]="rla3.isActive">User Registration</a>

</nav>


<router-outlet></router-outlet>