The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More

metronic 8 angular profile avatar not clickable after back from page error 404


when error page 404 opens and clicks on return home button the profile avatar (iser menu toggle) not clickable anymore , need to refresh the page


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 (8)


Hi Naji,

Check out these changes:

In file /src/app/_metronic/layout/components/header/navbar/navbar.component.html
Update this line by adding lg: 'hover'.

<div class="cursor-pointer symbol" [ngClass]="userAvatarClass" data-kt-menu-trigger="{default: "click", lg: "hover"}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">


/src/app/modules/errors/error404/error404.component.ts

Remove the reinitialization code:

routeToDashboard() {
this.router.navigate(["dashboard"]);
}



Hi Naji,

It looks like this issue was resolved in a recent update. Now, when navigating from the dashboard to the 404 page and then returning (either by using the back button or clicking the home button), the profile avatar dropdown should function properly without needing to refresh.

Could you please check it from the demo page.
https://preview.keenthemes.com/metronic8/angular/demo1/dashboard

Thank you



thank you Faizal ..
how to get the latest update ? i can see in changelog the last update was on 20 March, 2024

https://preview.keenthemes.com/metronic8/angular/docs/changelog



Hi naji,

You can add this code in the file at /app/_metronic/layout/components/topbar/topbar.component.ts. Placing it there for reinitialize the profile avatar menu after navigation events.

Thank you



Hi Faizal..
i'ts not working, and topbar.component not called from each app..
i tried to add the code in layout.component but still nothing happens



Hi naji,

Sorry for the delay in response. You could try reinitializing the necessary Metronic components when the page reloads. You can use Angular’s Router events, specifically on navigation events, to reinitialize the dropdown toggle.

ngOnInit() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
MenuComponent.reinitialization();
}
});
}



Hi Faizal,
where need to add this code?


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  :(