Flowbite dropdown not working when using with *ngFor in the Angular. I tried to pass dynamic and unique id to these items but still not working:
<div
class="mb-3 flex items-center justify-between py-2 px-4 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
>
<p class="text-sm">{{ task.text }}</p>
<div>
<button
[id]="'dropdownButton_' + task.id"
[attr.data-dropdown-toggle]="'task-detail-dropdown_' + task.id"
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
type="button"
>
<span class="sr-only">Open dropdown</span>
<svg
class="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 3"
>
<path
d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"
/>
</svg>
</button>
<!-- Dropdown menu -->
<div
[id]="'task-detail-dropdown_' + task.id"
class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
>
<ul class="py-2" [attr.aria-labelledby]="'dropdownButton_' + task.id">
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Edit</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Delete</a
>
</li>
</ul>
</div>
</div>
</div>
The error you get is as reported in this GitHub issue.
Approach 1
You may implement and apply the @FlowBite
decorator as in this comment.
Approach 2
You need to follow the instruction to work with dynamic components.
Update the app.component.ts file to use the initFlowbite function to enable the interactive components via data attributes:
import { initFlowbite } from 'flowbite';
export class TaskComponent {
ngAfterViewInit() {
initFlowbite();
}
}