Modal not working with Angular

[davidebraido00]

Describe the bug Hi, i'm using Flowbite with Angular. I have an error with the modals: Flowbite: Instance with ID offer does not exist. Modal with id offer has not been initialized. Please initialize it using the data-modal-target attribute. But I have already entered the data-modal-target attribute on my button.

this is the button code: <button data-modal-target="card_modal" data-modal-toggle="card_modal" class="text-white bg-[#7E2BB5] font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Change </button>

and this is the modal

code: <div id="card_modal" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="hidden fixed top-0 left-0 right-0 z-50 w-full p-8 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">

And the errors in the console is this:

• Flowbite: Instance with ID card_modal does not exist.
• Modal with id card_modal has not been initialized. Please initialize it using the data-modal-target attribute.

[JohnPetros]

My issue is the same, but I am using Flask.

[JohnPetros]

My solution is to ensure that the entire page is loaded before getting the modal instance:

window.addEventListener('load', () => {
  const modal = FlowbiteInstances.getInstance('Modal', 'modal-id')

  modal.show()
})

It works fine.

[davidebraido00]

ok thanks but "FlowbiteInstances" give me an error: Cannot find name FlowbiteInstances. how did you import it?

[JohnPetros]

In my case, FlowbiteInstances is a global object imported to my code via CDN, that means it comes inside the window object after the DOM has rendered.

window.FlowbiteInstances

the docs.