How to rebind tailwind element events to dynamically inserted HTML content

[SagarStake]

I have a component that get injected into DOM dynamically. The tailwind data-te-toggle, data-bs-target etc event binders do not work for the new content as these are inserted after the tailwind elements has binded with the prev DOM content. Im using tailwind elements with angular, so need a method that I can call in ngAfterViewInit that can rehook the tailwind events.
Also Im using tailwind-elements via import in my app component. (import 'tw-elements';)
If I want to reference the api in my component, te is undefined. How do I reference the imported tw-elements library in my component methods?

[smolenski-mikolaj]

Can you check if importing js file like this:
import * as te from 'tw-elements';
instead of:
import 'tw-elements';
fixes the issue with undefined te variable?

Also keep in mind that all data attributes changed into data-te syntax, so there is now data-te-target instead of data-bs-target attribute.

[SagarStake]

Thanks @smolenski-mikolaj ,
Im getting an error when trying to import as you mentioned.
Could not find a declaration file for module 'tw-elements'. '/node_modules/tw-elements/dist/js/index.min.js' implicitly has an 'any' type. Try npm i --save-dev @types/tw-elementsif it exists or add a new declaration (.d.ts) file containingdeclare module 'tw-elements';``

[nbyloff]

Is this why my select box is not rendering correcting in Vue.js with tw-elements styling?

Testing the first select component example has me confused. https://tailwind-elements.com/docs/standard/forms/select/#docsTabsOverview

I pasted the example select code in my Vue component, imported the package import 'tw-elements'; and build assets. It doesn't appear to pick up on the data-te-select-init property as there is no styling coming from this package.

I updated my code to use: import * as te from 'tw-elements'; and that got rid of the undefined error, but still no styling.

<div class="flex">
        <div class="my-3 xl:w-96">
          <select data-te-select-init id="dr-select">
            <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
          </select>
        </div>

Also note the second console.log statement below prints null when the first finds the select component. So for whatever reason te isn't finding the select component to style even though it's created on page load.

const singleSelect = document.querySelector("#dr-select");
console.log(singleSelect);
const singleSelectInstance = te.Select.getInstance(singleSelect);
console.log(singleSelectInstance);