I am building an Angular application using Tailwind CSS and Flowbite. I have a table where each row contains a dropdown button. The dropdown should display additional options when clicked. However, the dropdown does not appear when the button is clicked.

Here is the relevant part of my code:

<tbody>
  <tr *ngFor="let item of passwordTableData; let i = index" class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
      {{ item.siteName }}<br>
      <span class="username">{{ item.username }}</span>
    </th>
    <td class="px-6 py-4">
      <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Copy</a>
    </td>
    <td class="px-6 py-4">
      **<button id="dropdownMenuIconHorizontalButton{{i}}" [attr.data-dropdown-toggle]="'dropdownDots' + i" class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600" type="button">
        <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 [attr.id]="'dropdownDots' + i" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" [attr.aria-labelledby]="'dropdownMenuIconHorizontalButton{{i}}'">**
          <li>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Copy Username</a>
          </li>
          <li>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Copy Password</a>
          </li>
          <li>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Launch</a>
          </li>
        </ul>
        <div class="py-2">
          <a href="#" class="block px-4 py-2 text-sm text-red-700 hover:bg-red-100 dark:hover:bg-red-600 dark:text-red-200 dark:hover:text-white">Delete</a>
        </div>
      </div>
    </td>
  </tr>
</tbody>

Issues:
The dropdown does not open when I click the button.
There are no errors in the console to indicate what might be going wrong.
What I’ve Tried:
Ensured that Flowbite’s JavaScript is correctly included in my project.
Verified that the IDs and data attributes are correctly set.
Checked the Tailwind CSS classes to ensure they are applied correctly.