Make menu active in angular

Question

In my application i have a header with menu items in it. i am retrieving the menu list from a service and displaying the same in the header. on hover of the main list i am displaying the sub menus. i want to make my parent item active when its child item is clicked and navigate to its page(child item can be at multiple levels). I want the user to be notified under which page they are in.

HTML

<div class="collapse navbar-collapse">
    <ul class="navbar-nav mx-auto">
        <li class="nav-item dropdown" *ngFor="let menu of menus"></li>
        <a class="nav-link dropdown-toggle" href="#" id="{{ menu.label }}" data-toggle="dropdown"
            aria-expanded="false">{{ menu.label }}</a>
        <div *ngIf="menu.items.length > 0" class="dropdown-menu mt-0">
            <span *ngFor="let item of menu.items | SortOptionsBy: 'label'">
                <a routerLink="{{ item.url }}" *ngIf="!item.disabled" class="dropdown-item">
                    {{ item.label }}
                </a>
                <span *ngIf="item.items && item.items.length > 0">
                    <span *ngFor="let submenu of item.items | SortOptionsBy: 'label'">
                        <a href="{{ submenu.url }}" class="dropdown-item" target="_blank">
                            {{ submenu.label }}
                        </a>
                    </span>
                </span>
            </span>
        </div>
    </ul>
</div>

TS file

getMenus() {
    this.subscription = this.navService.getMenuList().subscribe(data => {
      this.menus = data;
    });
}

Sample response

{
  "data": [
    {
      "label": "Services",
      "items": [
        {
          "label": "Lawn maintainance",
          "url": "/home/lawn-maintainance"
        },
        {
          "label": "Pool Cleaning",
          "url": "/home/services/pool-cleaning"
        }
      ]
    },
    {
      "label": "Contact",
      "items": [
        {
          "label": "Conatct Supplier",
          "url": "/home/contact/contact-supplier"
        },
        {
          "label": "Place Order",
          "url": "/home/contact/place-order",
          "items": [
            {
              "label": "email",
              "url": "/home/contact/contact-supplier/email"
            },
            {
              "label": "phone",
              "url": "/home/contact/contact-supplier/phoe"
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

You can use routerLink

Use this directive to create a visual distinction for elements associated with an active route. For example, the following code highlights the word "Bob" when the router activates the associated route:

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

Whenever the URL is either '/user' or '/user/bob', the "active-link" class is added to the anchor tag. If the URL changes, the class is removed.

You can set more than one class using a space-separated string or an array. For example:

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

To add the classes only when the URL matches the link exactly, add the option exact: true:

<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>

To directly check the isActive status of the link, assign the RouterLinkActive instance to a template variable. For example, the following checks the status without assigning any CSS classes:

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

You can apply the RouterLinkActive directive to an ancestor of linked elements. For example, the following sets the active-link class on the parent tag when the URL is either '/user/jim' or '/user/bob'.

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>