how to use Flowbite in angular project?

Question

I want to use Flowbite in my project.I did the following steps but it still doesn't work.

1. I installed the tailwind first, Tailwind is working fine now.

2. Then I installed Flowbite using npm, and add Flowbite as a plugin inside the tailwind.config.js file. Base on this link: https://flowbite.com/docs/getting-started/quickstart/

   npm i flowbite

tailwind.config.js file ‍‍‍‍‍

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')]
}

angular.js file ‍‍‍‍‍

"architect": {
   "build": {
     "options": {
        "scripts": ["node_modules/flowbite/dist/flowbite.js"]
     },
}

I even used the package below, but it still doesn't work.

flowbite-angular

https://www.npmjs.com/package/flowbite-angular

Answer 1

I ran into this issue recently, and what I did was to implement mine slightly based on Vue's implementation.

1. npm i flowbite --save
2. Import the function needed for the component to work

import {
  initAccordions,
  initCarousels,
  initCollapses,
  initDials,
  initDismisses,
  initDrawers,
  initDropdowns,
  initModals,
  initPopovers,
  initTabs,
  initTooltips,
} from 'flowbite';

export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    initAccordions();
    initCarousels();
    initCollapses();
    initDials();
    initDismisses();
    initDrawers();
    initDropdowns();
    initModals();
    initPopovers();
    initTabs();
    initTooltips();
  }
}

You can also choose to import flowbite in tailwind.config.js, but it made no difference for me.

Answer 2

You can directly clone this flowbite-angular open source library and start using the UI components from it after importing the respective library modules. As af now flowbite is not fully developed for Angular, we do not have solution for some components which are not covered in this library.