<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.