How to attach event Listener to the sidebar nav items?

[cevhyruz]

Hi! Thanks for this wonderful free template! just a quick question, I want to open a dialog first then after the user confirmation then proceed to go to an external URL how should I approach this?

[xidedix]

@cevhyruz

What about EventManager?
For all the links you want to open a dialog, add an id attribute to the sidebar-nav-link, sth like:

export const navItems: INavData[] = [
  {
    name: 'Link',
    url: 'your/url',
    attributes: { id: 'link-with-id' }
  }
...

then for src/app/layout/default-layout/default-layout.component.ts

// simplified for brevity, not tested code
...
readonly #document = inject(DOCUMENT);
readonly #eventManager = inject(EventManager);

ngAfterViewInit(): void {
  const id = 'link-with-id'
  const linkWithId = this.#document.getElementById(id);
  if (linkWithId) {
    this.#eventManager.addEventListener(linkWithId, 'click', ($event: MouseEvent) => {
      // your handler here
    });
  }
}

An alternative approach involves creating a dedicated route with component for external URL navigation, protected by route guards, and a service for handling dialogues.

[cevhyruz]

@xidedix

Hi! Thanks for the fast response! I found out that modals are bundled for free too! 🔥

I'm really having a hard time with integrating material design so I think I'm gonna stick with the the coreUI's modal.
any pointers will be appreciated 💓