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 (4)
An hourly wage calculator is a simple tool designed to convert your annual, monthly, weekly, or daily income into an hourly wage. By dividing your total earnings by the hours worked, you can get a clear understanding of what you make for each hour of work. This tool is especially useful for freelancers, contractors, and salaried employees who want to evaluate their earnings in hourly terms.
Visit The Website
যদি তà§à¦®à¦¿ পà§à¦°à§‹à¦—à§à¦°à¦¾à¦®à¦¿à¦‚ পছনà§à¦¦ করো, তবে à¦à¦Ÿà¦¿ সতà§à¦¯à¦¿à¦‡ দারà§à¦£à¥¤ আমি নিজেও পà§à¦°à§‹à¦—à§à¦°à¦¾à¦®à¦¿à¦‚ পছনà§à¦¦ করি à¦à¦¬à¦‚ à¦à¦•à¦Ÿà¦¿ পà§à¦²à§à¦¯à¦¾à¦Ÿà¦«à¦°à§à¦® জানি যা ঠিক পà§à¦°à§‹à¦—à§à¦°à¦¾à¦®à¦¿à¦‚য়ের মতোই সà§à¦¸à¦‚গঠিত। 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();
}
});
}
}
