如何在侧面导航栏中的活动链接下划线？ 在Angle App中使用材质设计

Question

<div class="mt-3">
  <mat-nav-list>

      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          SERVICE
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          BILLING
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          OIL TICKETS
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          MY TIME
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          APPROVE TIME
        </a>
      <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'>
          EMPLOYEE LIST
        </a>

snippet of my html navigation page I just want to underline the active link but not quite sure how to do that within an angular app using material design. Also if there is a way to collapse it I would like to know that too. Thank you.

Answer 1

As found in the Angular Routing and Navigation documentation, you use the routerLinkActive directive.

<mat-nav-list>
   <a mat-list-item 
        routerLink="/paycard"
        routerLinkActive="active_route"> Paycard </a>
</mat-nav-list>

This will add the .active_route class to your active route. Then you can style it as you'd like:

.active_route {
  text-decoration: underline;
}

If you have similar links, you may need to use {pathMatch: full} in the router link options (eg if you have routes "/pay" and "/pay/card".)

Answer 2

If you do the routing in the tag you can add the routerLinkActive attribute to apply a css class when the route is active.

In you case the would look something like this:

    <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'
 routerLink="service" routerLinkActive="<css class you want to apply when active"> SERVICE </a>

For more information have a look here