mat-tab-link is not properly underline the selected tab in Angular

<div class="navtabs-container">
<nav mat-tab-nav-bar fxFlex fxLayout="row" fxLayoutAlign="center center" >
<a mat-tab-link routerLink="/" routerLinkActive ="active" #home="routerLinkActive" [active]="home.isActive" >
Home
</a>
<a mat-tab-link routerLink="/executive_dashboard" routerLinkActive ="active" #executivedashboard="routerLinkActive" [active]="executivedashboard.isActive" >
Executive Dashboard
</a>
<a mat-tab-link routerLink="/food-beverage" routerLinkActive ="active" disabled #adminsection="routerLinkActive" [active]="adminsection.isActive" >
Admin Section
</a>
<a mat-tab-link routerLink="/lifestyle" routerLinkActive ="active" disabled #myrequests="routerLinkActive" [active]="myrequests.isActive">
My Requests
</a>
<a mat-tab-link routerLink="/helpview" routerLinkActive ="active" #helps="routerLinkActive" [active]="helps.isActive">
Help <mat-icon matListItemIcon>contact_support</mat-icon>
</a>
</nav>
</div>


I am trying the underline the tab when it is being selected but the actual result I am getting is by default home tab is being selected and underlined , even if you click on other tabs.

Continue reading...