Angular data-kt-menu issue when reload page

Question

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. copy /* Menu Code */ /* Trigger Code */ 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?

Faizal · Answer

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: 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();
  }

}

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();
         }
       });
     }
   
   }

Angular data-kt-menu issue when reload page

Replies (1)

Metronic

ReUI

Products

Legal

Stay Connected