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" rel="noopener noreferrer">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" rel="noopener noreferrer">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" rel="noopener noreferrer">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" rel="noopener noreferrer">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 (3)
যদি তà§à¦®à¦¿ পà§à¦°à§‹à¦—à§à¦°à¦¾à¦®à¦¿à¦‚ পছনà§à¦¦ করো, তবে à¦à¦Ÿà¦¿ সতà§à¦¯à¦¿à¦‡ দারà§à¦£à¥¤ আমি নিজেও পà§à¦°à§‹à¦—à§à¦°à¦¾à¦®à¦¿à¦‚ পছনà§à¦¦ করি à¦à¦¬à¦‚ à¦à¦•à¦Ÿà¦¿ পà§à¦²à§à¦¯à¦¾à¦Ÿà¦«à¦°à§à¦® জানি যা ঠিক পà§à¦°à§‹à¦—à§à¦°à¦¾à¦®à¦¿à¦‚য়ের মতোই সà§à¦¸à¦‚গঠিত। https://banzaibets.net/ à¦à¦•à¦Ÿà¦¿ অনলাইন পà§à¦²à§à¦¯à¦¾à¦Ÿà¦«à¦°à§à¦® যেখানে সà§à¦²à¦Ÿ, টেবিল গেম à¦à¦¬à¦‚ লাইঠকà§à¦¯à¦¾à¦¸à¦¿à¦¨à§‹à¦° বিশাল পরিসর রয়েছে। à¦à¦° নিরà§à¦à¦°à¦¯à§‹à¦—à§à¦¯à¦¤à¦¾ à¦à¦¬à¦‚ সà§à¦¬à¦šà§à¦›à¦¤à¦¾ সতà§à¦¯à¦¿à¦‡ পà§à¦°à¦¶à¦‚সার যোগà§à¦¯à¥¤ নতà§à¦¨ কিছৠচেষà§à¦Ÿà¦¾ করতে চাইলে à¦à¦Ÿà¦¿ অবশà§à¦¯à¦‡ à¦à¦¾à¦²à§‹ à¦à¦•à¦Ÿà¦¿ বিকলà§à¦ªà¥¤
<p><a target="_blank" rel="noopener noreferrer" href="https://subwaysurfersmodapk.com.in/">Download Subway Surfers Mod APK unlimited characters and coins </a>offers an exhilarating twist on the classic endless runner! Dash through vibrant subways, evade trains, and collect unlimited coins. Unlock characters and power-ups for an enhanced gaming experience. Join Jake, Tricky, and Fresh in this action-packed adventure, surf on hoverboards, and conquer exciting challenges worldwide. Download now and elevates your Subway Surfers experience!</p>
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();
}
});
}
}
