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

Question

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>

Answer 1

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>

Answer 2

You can set the style of the element as:

border-bottom: blue;

Edit:

You can share what you have. It can be like that:

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: blue;
}