Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Reinitializing topbar menu in Angular


Hello
I have the demo 2 of angular but when I access the page for the first time after logging in, the top bar does not work, unless I do a complete reload of the page.
I am calling again the function (menuReinitialization) located app/_metronic/kt/kt-helpers.ts and this does not solve the error.
How could I solve this problem?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Hi,

Could you please provide us with the specific version of Metronic Angular that you initiated your project with? From our testing, the dropdown menu functions correctly both upon login and during navigation between pages. Were you able to replicate the issue in the preview version?

https://preview.keenthemes.com/metronic8/angular/demo2/dashboard

Thanks



This is the problem that is occurring
https://www.loom.com/share/2134f1a456d242d1a59c7078753b1ed9



Hi Maricel,

May I know if you are working on this dropdown on the topbar? This dropdown works for click.

Please check the video here:
https://www.loom.com/share/c698f412d9384f80954d8d3f5675550f

https://preview.keenthemes.com/metronic8/angular/demo2/dashboard

Thanks



yes, i use angular 14 and this function is not working



Hi Maricel,

Are you working on the latest Angular version? We did this to reinitialize the dropdown menu. Could you please try it?


ngOnInit(): void {
const routerSubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
this.menuReinitialization();
}
});
}


menuReinitialization() {
setTimeout(() => {
MenuComponent.reinitialization();
DrawerComponent.reinitialization();
ToggleComponent.reinitialization();
ScrollComponent.reinitialization();
}, 50);
}


Thanks



Hi Maricel,

Thank you for informing us. We will check it first and look for a solution.

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(