Dropdown and other animations stop working when going through pages.

[yohannes-teshale]

I am currently using flow bite using angular v16 and at first everything works fine but after you switch pages you have to refresh in order for them to work.

[islam-farahat]

i have the same error also

[alexsotir]

Use the newly released v1.6.6. It allows you to call window.initFlowbite() to re-initialize all components.

[DavithkbY]

Use the newly released v1.6.6. It allows you to call window.initFlowbite() to re-initialize all components.

What do you mean? Can you show an example? I get Property 'initFlowbite' does not exist on type 'Window & typeof globalThis'.

[OmarMtya]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request.

Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

[DavithkbY]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request.

Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

You're the savior and hero we needed. Your solution works!!!!!! Amazing that this has finally been fixed after so many months of ignoration by the flowbite devs!!

[OmarMtya]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request. Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

You're the savior and hero we needed. Your solution works!!!!!! Amazing that this has finally been fixed after so many months of ignoration by the flowbite devs!!

Please, if you find any weird behaviour let me know, I'm still testing it

[idan003]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request. Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

You're the savior and hero we needed. Your solution works!!!!!! Amazing that this has finally been fixed after so many months of ignoration by the flowbite devs!!

Please, if you find any weird behaviour let me know, I'm still testing it

for me sometimes its working, and sometimes i get this error: Modal with id defaultModal has not been initialized. Please initialize it using the data-modal-target attribute.

[OmarMtya]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request. Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

You're the savior and hero we needed. Your solution works!!!!!! Amazing that this has finally been fixed after so many months of ignoration by the flowbite devs!!

Please, if you find any weird behaviour let me know, I'm still testing it

for me sometimes its working, and sometimes i get this error: Modal with id defaultModal has not been initialized. Please initialize it using the data-modal-target attribute.

What block/component are you trying to use?

Just an advice, I've been in that situation too, instead of using data-modal-hide or data-modal-show, use data-modal-toggle. One more thing, if you have a ngFor with nested flowbite components, you will have to make a new modal for every repeated component to avoid having more than one backdrop (Like having the modal inside of the ngFor, and make sure that they have a unique ID). If you need more help, you can show me what are you trying to do.

[idan003]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request. Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

You're the savior and hero we needed. Your solution works!!!!!! Amazing that this has finally been fixed after so many months of ignoration by the flowbite devs!!

Please, if you find any weird behaviour let me know, I'm still testing it

for me sometimes its working, and sometimes i get this error: Modal with id defaultModal has not been initialized. Please initialize it using the data-modal-target attribute.

What block/component are you trying to use?

Just an advice, I've been in that situation too, instead of using data-modal-hide or data-modal-show, use data-modal-toggle. One more thing, if you have a ngFor with nested flowbite components, you will have to make a new modal for every repeated component to avoid having more than one backdrop (Like having the modal inside of the ngFor, and make sure that they have a unique ID). If you need more help, you can show me what are you trying to do.

have multi <router-outlet></router-outlet> maybe that is the issue. my component (not app.module)

import { Component, OnInit } from '@angular/core';
import { Flowbite } from '@app/components/flowbite';

@Component({
  selector: 'app-platfom',
  templateUrl: './platform.component.html'
})
@Flowbite()
export class PlatfomComponent implements OnInit {
  ngOnInit(): void {
  }
}

html of this component:

<div class="antialiased bg-gray-50 dark:bg-gray-900 min-h-screen">
   <platfom-header></platfom-header>
   <platfrom-sidebar></platfrom-sidebar>
   <main class="p-4 md:ml-64 h-auto pt-20">
      <router-outlet></router-outlet>
   </main>
</div>

in and then i enter this also on:

@Component({
  selector: 'app-collections',
  templateUrl: './collections.component.html'
})
@Flowbite()
export class CollectionsComponent implements OnInit {
  loading = false;
  public collectionsData: any;
  public error = '';
  public typeHrs = 'ONE_DAY';
  public eth = faEthereum;
  public add = faSquarePlus;
  constructor(private collectionsServiceTsService: CollectionsServiceTsService) {}

  ngOnInit(): void {
    this.getCollections(this.typeHrs);
    interval(30000).subscribe(
      () => {
        this.getCollections(this.typeHrs);
        this.loading = false;
      },
      (error: any) => {
        console.log('error');
      },
      () => {
        console.log('observable completed !');
      }
    );
  }

  getCollections(hrs: string) {
    this.loading = true;
    return this.collectionsServiceTsService
    .getCollections(hrs)
    .pipe(first())
    .subscribe((data: Collections) => {
      this.collectionsData = data;
      this.loading = false;
    })
  }

  getHrs(typeHrs: string) {
    this.typeHrs = typeHrs;
    this.getCollections(typeHrs);
  }

  filterResults(text: string) {
    if (!text) {
      this.collectionsData = this.collectionsData;
    }

    this.collectionsData = this.collectionsData.filter(
      (data: { name: string; }) => data?.name.toLowerCase().includes(text.toLowerCase())
    );
  }

}

the html:

<div class="mb-4 px-4 sm:px-6 relative mt-4 sm:mt-6 pb-12 flex-1 self-center w-full">
   <div class="flex-wrap md:flex-nowrap flex flex-row justify-between">
         <div class="flex flex-col" style="gap: 6px;">
            <h1 class="font-heading font-extrabold antialiased text-[2rem] text-left text-gray-90 dark:text-white">Trending NFT Collections <span class="text-primary">by Sales</span></h1>
            <p class="font-medium antialiased text-2xl text-yellow-300">See what's selling. Prices updated in real time.</p>
         </div>
         <div class="pt-2 md:p-0 flex flex-col items-end">
            <img src="/assets/images/folders.png" />
         </div>
   </div>
   <div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-10">
      <app-skeleton *ngIf="loading"></app-skeleton>
      <div class="flex items-center justify-between pb-4" *ngIf="!loading">
          <div>
              <button id="dropdownRadioButton" data-dropdown-toggle="dropdownRadio" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                  <svg class="w-3 h-3 text-gray-500 dark:text-gray-400 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                          <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"/>
                      </svg>
                  Last {{typeHrs}}
                  <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                  </svg>
              </button>
              <!-- Dropdown menu -->
              <div id="dropdownRadio" class="z-10 hidden w-48 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(522.5px, 3847.5px, 0px);">
                  <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownRadioButton">
                      <li (click)="getHrs('ONE_HOUR')">
                          <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                              <label for="filter-radio-example-1" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last day</label>
                          </div>
                      </li>
                      <li (click)="getHrs('TWELVE_HOURS')">
                        <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                            <label for="filter-radio-example-1" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last 12 hrs</label>
                        </div>
                    </li>
                    <li (click)="getHrs('ONE_DAY')">
                        <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                            <label for="filter-radio-example-1" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last 12 hrs</label>
                        </div>
                    </li>
                    <li (click)="getHrs('SEVEN_DAYS')">
                        <div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                            <label for="filter-radio-example-1" class="w-full ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last 12 hrs</label>
                        </div>
                    </li>
                  </ul>
              </div>
          </div>
          <label for="table-search" class="sr-only">Search</label>
          <div class="relative">
              <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                  <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
              </div>
              <input type="text" id="table-search" class="block p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for items" #filter (keyup)="filterResults(filter.value)" />
          </div>
      </div>
      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400" *ngIf="!loading">
          <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
              <tr>
                  <th scope="col" class="px-6 py-3">
                    COLLECTION
                  </th>
                  <th scope="col" class="px-6 py-3">
                    SALES FLORR
                  </th>
                  <th scope="col" class="px-6 py-3">
                      SALES
                  </th>
                  <th scope="col" class="px-6 py-3">
                      AVERAGE
                  </th>
                  <th scope="col" class="px-6 py-3">
                      VOLUME
                  </th>
                  <th scope="col" class="px-6 py-3">
                    SET ALERT
                  </th>
              </tr>
          </thead>
          <tbody>
              <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600" *ngFor="let quote of collectionsData">
                  <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    <a class="block px-6 py-4 cursor-pointer transition duration-500 ease-in-out font-normal text-base text-blue hover:text-blue/90" href="/collections/opepen-edition/overview">
                        <div class="flex flex-row items-center" style="gap: 18px;">
                            <div class="flex flex-row">
                                    <img class="h-full w-full rounded-full" alt="Opepen Edition" loading="lazy" [src]="quote.imageUrl" style="height: 40px; width: 40px;" />
                            </div>
                            <div class="flex flex-col">
                                    <div class="font-extrabold antialiased text-base text-primary-text overflow-hidden text-ellipsis" style="max-width: 240px;">{{quote.name}} </div>
                                    <div class="font-light text-sm text-secondary-text">Circulating supply: <strong>{{quote.circulatingSupply}}</strong></div>
                            </div>
                        </div>
                    </a>
                  </th>
                  <td class="px-6 py-4">
                    <helper-icons [icon]="eth"></helper-icons>  
                    <span class="pl-1">{{quote.floor}}</span>
                  </td>
                  <td class="px-6 py-4">
                      {{quote.totalSales}}
                  </td>
                  <td class="px-6 py-4">
                    <helper-icons [icon]="eth"></helper-icons>  
                    <span class="pl-1">{{quote.average}}</span>
                  </td>
                  <td class="px-6 py-4">
                    <helper-icons [icon]="eth"></helper-icons>  
                    <span class="pl-1">{{quote.volume}}</span>
                  </td>
                  <td class="px-6 py-4">
                    <!-- Modal toggle -->
                    <button data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="block text-black bg-yellow-200 hover:bg-yellow-300 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center" type="button">
                        <helper-icons [icon]="add"></helper-icons>  Add Alert  
                    </button>
                  </td>
              </tr>
          </tbody>
      </table>
   </div>
</div>

<!-- Main modal -->
<div id="defaultModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-2xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Terms of Service
                </h3>
                <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="defaultModal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-6 space-y-6">
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button data-modal-hide="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 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">I accept</button>
                <button data-modal-hide="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
            </div>
        </div>
    </div>
</div>

[merof-code]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request. Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

You're the savior and hero we needed. Your solution works!!!!!! Amazing that this has finally been fixed after so many months of ignoration by the flowbite devs!!

Please, if you find any weird behaviour let me know, I'm still testing it

Awesome, works, thanks!

[byteAr]

I have a sidebar that does not display when I use an *ngIf directive, it does not work with that decorator either

[OmarMtya]

I have a sidebar that does not display when I use an *ngIf directive, it does not work with that decorator either

Create a new component for your sidebar. And in your sidebar component use the decorator. The idea is that every time the ngIf changes its value the decorator should be executed

[byteAr]

Tengo una barra lateral que no se muestra cuando uso una directiva *ngIf, tampoco funciona con ese decorador.

Crea un nuevo componente para tu barra lateral. Y en tu componente de la barra lateral usa el decorador. La idea es que cada vez que ngIf cambie su valor se debe ejecutar el decorador.

I did what you told me but I still have the following error: flowbitedecorator.ts:53 Drawer with id drawer-navigation has not been initialized. Please initialize it using the data-drawer-target attribute.

[guiolmar]

For React just use:

useEffect(() => { initFlowbite(); }, []); in the page where is the component and import 'flowbite'; in your App.jsx or index.tsx

[torresmald]

I have a sidebar that does not display when I use an *ngIf directive, it does not work with that decorator either

Create a new component for your sidebar. And in your sidebar component use the decorator. The idea is that every time the ngIf changes its value the decorator should be executed

How can I use this decorator? I have this issue, Im using the datepicker.

Inside the router outlet is not working.

Tried to add :

import { Component, OnInit } from '@angular/core'; import {initFlowbite} from 'flowbite' import { Flowbite } from '@app/components/flowbite';

@Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.scss'] }) export class TestComponent implements OnInit {

@Flowbite()

ngOnInit(): void { initFlowbite() } }

Have and error in the import line, --> Cannot find module '@app/components/flowbite' or its corresponding type declarations.

[Josue19688]

Thank you, it's incredible

[GkIgor]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request.

Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

Obrigado parceiro, minha performance estava caindo por ficar iniciando o flowbit em todos os componentes em 3 ciclos de vida diferente.

[marlonlml1308]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request.

Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

How can I use this decorator?

[GkIgor]

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request. Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

How can I use this decorator?

I downloaded the file within my project. Then just call the decorator.

[torresmald]

Working fine! Thx a lot

[DrSAS]

Is there any progress on this? I have the same problem with Angular 18. I'm using the decorator in the meantime.