Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Angular data-kt-menu issue when reload page


Hi.

Route information :
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">
Make a Lead
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#"%20class="menu-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">
Create Opportunity
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3 my-1">
Edit Contact
</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?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Interesting issue! It looks like the menu script isn’t re-initializing after a hard reload. Maybe re-triggering the plugin in ngAfterViewInit() or reloading it on route change could help. I faced something similar when testing tracking features like post track pakistan, where re-initialization on refresh was also necessary.



I’ve faced similar issues with data-kt-menu not reinitializing properly after a page reload in Angular. Debugging it was tricky! Took short breaks playing the bussid APK 2025 it really helped clear my head.



যদি তুমি প্রোগ্রামিং পছন্দ করো, তবে এটি সত্যিই দারুণ। আমি নিজেও প্রোগ্রামিং পছন্দ করি এবং একটি প্ল্যাটফর্ম জানি যা ঠিক প্রোগ্রামিংয়ের মতোই সুসংগঠিত। একটি অনলাইন প্ল্যাটফর্ম যেখানে স্লট, টেবিল গেম এবং লাইভ ক্যাসিনোর বিশাল পরিসর রয়েছে। এর নির্ভরযোগ্যতা এবং স্বচ্ছতা সত্যিই প্রশংসার যোগ্য। নতুন কিছু চেষ্টা করতে চাইলে এটি অবশ্যই ভালো একটি বিকল্প।



<p><a target="_blank" rel="noopener noreferrer" href="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();
         }
       });
     }
   
   }
   
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(