Modal Not Working Initaily in Angular

[Shalil-j]

I'm having a modal to add users in my angular project but whenever I click on the button it won't show at first, if I reload the page it works fine

I'm using angular cli - 15.1.5 flowbit version: 1.7.0

Expected behavior work modal at first without reloading the page

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome

I configure everything properly according to the instruction given in flowbit installation for angular

I want it to be work fine without reloading

[idan003]

same for me

[7amou3]

Same problem for the tabs component, it seems like the flowbite component doesn't load when I navigate between pages (using the angular navigation), I need to reload the page manually

[merof-code]

I think I have something similar. I'm not sure. If you use ids of an object in an observable and make a delay to load for a second, then no dropdown will work.

Anyway, here is a reproducible example.

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styles: [],
})
export class ProjectsComponent {
  thingsObservable$: Observable<Project[]>;
  things:Project[] = [
    {
      id: 0,
      ...},...
    }]
    constructor(private projectService:ProjectService) {
    this.projectList$ = projectService.get();
    this.thingsObservable$ = of(this.things)
      // Add a delay of 1 second using the 'delay' operator
      .pipe(delay(1000));
  }

<ul role="list">
    <app-project *ngFor="let project of thingsObservable$ | async"
      [project]="project"
      (edit)="onEdit($event)"
      (delete)="onDelete($event)"
    ></app-project>
  </ul>

and inside app-project

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
})
export class ProjectViewComponent {
  @Input() project!:Project;
  @Output() edit: EventEmitter<Project> = new EventEmitter<Project>();
  @Output() delete: EventEmitter<Project> = new EventEmitter<Project>();
}

<button id="settings-dropdown-button" [attr.data-dropdown-toggle]="project.id"
        class="inline-flex items-center p-0.5 text-sm font-medium text-center text-gray-500 hover:text-gray-800 rounded-lg focus:outline-none dark:text-gray-400 dark:hover:text-gray-100"
        type="button">
        <svg class="w-5 h-5 rotate-90" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg">
          <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
        </svg>
      </button>

    <div [id]="project.id"
      class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
      <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="settings-dropdown-button">
        <li>
          <a (click)="onEditClick()" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a>
        </li>
      </ul>
      <div class="py-1">
        <a (click)="onDeleteClick()"
          class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete</a>
      </div>
    </div>

and this will work if we take away the delay, but not

[merof-code]

I found a fix, mentioned here https://github.com/themesberg/flowbite/issues/579#issuecomment-1642365004

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

[otoman]

Same problem here

[JackCollier]

To fix this I imported import { initFlowbite } from 'flowbite';

and called initFlowbite(); in my ngOnInit()

[Andrew-1000]

https://github.com/themesberg/flowbite/issues/604#issuecomment-1829800543 This worked for me

[Shalil-j]

To fix this I imported import { initFlowbite } from 'flowbite';

and called initFlowbite(); in my ngOnInit()

ya but still it didn't work at first, even though i added on all component. its getting loaded but the functionality remains the same i need to reload the page in order to use it, and this is not for modal components like accordiong, calendar n all are having the same issues

[zoltanszogyenyi]

The solution provided by @JackCollier is correct. We recommend using the initFlowbite() function:

https://flowbite.com/docs/getting-started/angular/

[daveyx]

i just did a initModals(); in my component