Angular data-kt-menu issue when reload page
Hi.
Route information : http://root.localhost:4200/contactprofile/2/overview
Components : ContactProfileComponent,OverviewComponent
here when i go a spesific profile the router automaticly routing to child overview component in contact profile. I used data-kt-menu in overview component.
/* Menu Code */
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3"
data-kt-menu="true">
<!--begin::Heading-->
<div class="menu-item px-3">
<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Contact Options</div>
</div>
<!--end::Heading-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">Make a Lead</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20flex-stack%20px-3" target="_blank">Make a Customer
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
title="Specify a target name for future usage and reference"></i></a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">Create Opportunity</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3 my-1">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">Edit Contact</a>
</div>
<!--end::Menu item-->
</div>
/* Trigger Code */
<button class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary" data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end">
<i class="bi bi-three-dots fs-3"></i>
</button>so this menu doesnt'shown in page when i clicked button. After some search i tried the scripts.init.components pluginsInitialization methot but this time if i click to route ContactProfile this menu works but if i reload page or push f5 button to reload menu again doesnt'shown.
how can we resolve this problem?
Replies (1)
Hi,
It seems like you are facing an issue with the `data-kt-menu` not being displayed correctly in your Angular application when navigating to a specific profile page. This issue could be related to the initialization of the `data-kt-menu` component when the page is reloaded.
You can try these:
1. In your `OverviewComponent` TypeScript file (`overview.component.ts`), import the necessary functions from the Metronic theme scripts and use them to initialize the menu:
import { Component, AfterViewInit } from "@angular/core";
import {
MenuComponent,
} from "../../../kt/components";
@Component({
selector: "app-overview",
templateUrl: "./overview.component.html",
styleUrls: ["./overview.component.css"]
})
export class OverviewComponent implements AfterViewInit {
ngAfterViewInit(): void {
MenuComponent.reinitialization();
}
}2. You can also try to initialize the menu when a specific navigation event occurs, like the Angular Router's `NavigationEnd` event. This ensures that the menu is initialized every time the route changes:
import { Component, OnInit } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";
import {
MenuComponent,
} from "../../../kt/components";
@Component({
selector: "app-overview",
templateUrl: "./overview.component.html",
styleUrls: ["./overview.component.css"]
})
export class OverviewComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit(): void {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
MenuComponent.reinitialization();
}
});
}
}
