Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

data-kt-drawer Popup some times can't open


Guys, I have a question. In Angular, I'm using a data-kt-drawer popup, which is a right-side sliding popup. However, for some reason, when the project first loads and I click the button, the animation and the dimming effect on the page work, but the popup doesn't appear from the right side. Yet, when I refresh the page, the issue resolves, and the popup becomes visible.

I've configured all my module files to load on the login screen as soon as the project starts, but this hasn't fixed the issue either. Has anyone encountered this before? How can I solve this? I can't pinpoint the root cause because when the issue occurs, I try adding console.log statements in the code, but since the project refreshes, the popup starts working, and I lose track of the issue.

Can anyone help?

this is my popup html

<div
id="kt_drawer_transactiondetailmenu"
class="bg-body resize-body b"
data-kt-drawer="true"
data-kt-drawer-name="transactiondetailmenu"
data-kt-drawer-activate="true"
data-kt-drawer-overlay="true"
data-kt-drawer-direction="end"
data-kt-drawer-toggle="#kt_drawer_transactiondetailmenu_toggle"
data-kt-drawer-close="#kt_drawer_transactiondetailmenu_close"
#scrollableResizeDiv
[style.width.px]="resizeWidth"

>


This is the code that opens my popup:
<pre lang="html">
<a id="kt_drawer_transactiondetailmenu_toggle" (click)="openPopup()" href="javascript:;" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary shadow-sm aside-color aside-color transaction-page-step3">
<span [inlineSVG]=""./assets/media/icons/duotune/arrows/arr064.svg"" class="svg-icon svg-icon-2"></span>
</a>


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


Hi

Could you please try to add this at your component param?

changeDetection: ChangeDetectionStrategy.Default


@Component({
selector: "app-your-component",
templateUrl: "./your-component.html",
// No need to specify changeDetection if you want the default behavior
// changeDetection: ChangeDetectionStrategy.Default (this is implicit)
})
export class YourComponent {
// Your component logic
}


Thanks



It seems like the issue could be related to when the `data-kt-drawer` initialization occurs. The problem might be that the script initializing the popup runs before the DOM or Angular bindings are fully ready.

Here’s a potential fix:
1. Ensure the `data-kt-drawer` plugin is properly initialized after the Angular view is loaded using `AfterViewInit`.
2. Use a delay to reinitialize the drawer in case of race conditions.
Here’s a link to the Metronic documentation for Drawers. Check if you're missing any required initialization steps!


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