Angular-7 tab active link not working?

Programming
, , ,
1

I want to create an active link and highlight the router tab when changing routers for four icons. Here is my HTML file for one module:

<div class="smart-manage">
  <a routerLink="/dashboard" class="active" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <span data-toggle="tooltip" title="Smart Dashboard" data-placement="right">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
2

To create an active link and highlight the router tab when changing routers for four icons, you need to add the same code for each icon with their respective routerLink values. Here is an example code for another icon:

<div class="smart-manage">
  <a routerLink="/dashboard" class="active" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <span data-toggle="tooltip" title="Smart Dashboard" data-placement="right">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"> 
  </a>
  <a routerLink="/settings" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <span data-toggle="tooltip" title="Smart Settings" data-placement="right">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"> 
  </a>
</div>

In this code, we added another <a> tag with a different routerLink value for the “Smart Settings” icon. We also added the routerLinkActive directive and [routerLinkActiveOptions] property to highlight the active tab when the user navigates to the “Smart Settings” page.