Reload Menu
Hi,
I am using metronic angular version 8.2.2. I dynamically load the sidebar-menu but when I refresh my page, the relevant menu is not selected by default. What to do ?
Replies (6)
Hi Romaric Babatundé
Compare your menu's HTML structure with the original Metronic Angular code. make sure that the classes and attributes match exactly. Metronic updates sometimes include changes to the HTML structure or required classes for proper functionality.
Ensure that all necessary classes and data attributes are correctly applied to your menu items and sub-items. Metronic relies heavily on these for JavaScript-based functionality.
Temporarily replace your menu implementation with the original menu code from Metronic's Angular example. Just to see if the issue lies within your custom routing or if it is issue with the updated Metronic.
Open your browser's developer console and check for any JavaScript errors when you interact with the menu.
Hi Romaric Babatundé
You can create a custom solution by using template reference variables (#) to get references to routerLinkActive and its properties.
Here’s an example:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
[ngClass]="{"active": child1RLA.isActive || child2RLA.isActive}">
Parent
</a>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" [routerLink]="["app-child1"]" [routerLinkActive]="["active"]" #child1RLA="routerLinkActive">
Child 1
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" [routerLink]="["app-child2"]" [routerLinkActive]="["active"]" #child2RLA="routerLinkActive">
Child 2
</a>
</div>In this example, we use child1RLA and child2RLA as template reference variables to access the routerLinkActive properties for child routes.
Remember to adjust the route paths and class names according to your specific application.
Hi dear Faizal,
Thank you for the answer.
But I'm using the Angular template from Metronic version 8.2.
I have already revitalized the menu.
So you will notice that the display is done dynamically and the problem I currently have is that when I refresh the page, the parent of the active menu does not open.
And I'm not sure what is causing this problem.
If you can help me find a solution taking into account the html template not provided by Metronic on the menu side.
Thanks for your return.
Sincerely
Hi Faizal,
routerLinkActive on dynamic child menu doesn't activate parent angular when reload page angular. How can i fix problem ?
Metronic Angular 8.2
TypeScript :
<a #link *ngIf="!menu.hasOwnProperty("type")" class="menu-link without-sub" [ngClass]="isMenuItemActive(menu, link) ? "active" : """
routerLinkActive="{{isMenuItemActive(menu, link) ? "active" : ""}}" [routerLink]="[menu.page]" [routerLinkActiveOptions]="{exact: true}">
<span [ngClass]="menu.icon != null && menu.icon?.length > 0 ? "menu-icon" : "menu-bullet""
class="menu-icon">
<app-keenicon *ngIf="menu.icon != null && menu.icon?.length > 0" class="fs-2"
name="{{ menu.icon }}"></app-keenicon>
<span *ngIf="menu.icon != null && menu.icon.length == 0" class="bullet bullet-dot"></span>
</span>
<span *ngIf="menu.translate" class="menu-title" translate="{{ menu.translate }}"></span>
<span *ngIf="!menu.translate" class="menu-title">{{ menu.title }}</span>
</a>Hi,
If you are using a static menu and Angular Router, you can use Angular's routerLinkActive directive to set the active state for a menu item based on the current route.
If you are dealing with a dynamic menu loaded and you still want to highlight the active menu item based on the current route, you can use a combination of Angular's routerLink and routerLinkActive directives along with custom logic in your component to determine the active state. Here's an example:
Assuming you have a dynamic menu loaded from a variable like this:
// your-menu.service.ts
import { Injectable } from "@angular/core";
@Injectable({
providedIn: "root",
})
export class YourMenuService {
getMenuItems(): MenuItem[] {
// Retrieve your dynamic menu items from a variable or API
return [
{ path: "/dashboard", label: "Dashboard" },
{ path: "/profile", label: "Profile" },
// Add more menu items as needed
];
}
}interface MenuItem {
path: string;
label: string;
}Now, in your component that renders the dynamic menu:
// your-menu.component.ts
import { Component, OnInit } from "@angular/core";
import { YourMenuService } from "path-to-your-menu-service";
import { ActivatedRoute } from "@angular/router";
@Component({
selector: "app-your-menu",
templateUrl: "./your-menu.component.html",
styleUrls: ["./your-menu.component.css"],
})
export class YourMenuComponent implements OnInit {
menuItems: MenuItem[] = [];
constructor(private menuService: YourMenuService, private route: ActivatedRoute) {}
ngOnInit(): void {
// Load dynamic menu items
this.menuItems = this.menuService.getMenuItems();
}
// Custom logic to determine whether the menu item is active
isMenuItemActive(path: string): boolean {
return this.route.snapshot.routeConfig?.path === path;
}
}And in your template:
<!-- your-menu.component.html -->
</p><ul>
<li *ngFor="let menuItem of menuItems" [class.active]="isMenuItemActive(menuItem.path)">
<a [routerLink]="menuItem.path">{{ menuItem.label }}</a>
</ul>In this example, the isMenuItemActive method checks if the current route matches the path associated with the menu item. If it does, the "active" class is added to highlight the menu item.
Ensure you have the appropriate styles for the "active" class in your CSS as mentioned in the previous response.
Adjust the code according to your specific use case and styling preferences. This approach should work for dynamically loaded menus based on a variable.
