CODEWITHSUNDEEP
htmlangularangularjs-directiveflowbite
Mohammad Reza Ghasemi
Mohammad Reza Ghasemi

Reputation: 363

Flowbite dropdown not working when using with *ngFor in the Angular

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>

StackBlitz Project

Upvotes: 1

Views: 1082

Answers (1)

Yong Shun
Yong Shun

Reputation: 51240

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();
  }
}

Upvotes: 1

Related Questions