Integrate FlyonUI with Angular and Tailwind CSS to create a modern, responsive UI, streamlining your development process efficiently.

• 1

  Install FlyonUI

  Install flyonui via npm.

  ---

• 2

  Add FlyonUI plugin

  Include FlyonUI plugin in your main.css file.

  @import "tailwindcss";
  @plugin "flyonui";
  @import "flyonui/variants.css";
  @source "../node_modules/flyonui/flyonui.js"; 
  
  /* Import Third-party override css */
  /* @import "flyonui/src/vendor/flatpickr.css"; */
  /* @import "flyonui/src/vendor/notyf.css"; */
  /* @import "flyonui/src/vendor/datatables.css"; */
  /* @import "flyonui/src/vendor/editor.css"; */
  /* @import "flyonui/src/vendor/fullcalendar.css"; */
  /* @import "flyonui/src/vendor/raty.css"; */
  /* @import "flyonui/src/vendor/waves.css"; */
  /* @import "flyonui/src/vendor/apexcharts.css"; */        

  Note: If you want to include specific js component

  @source "../node_modules/flyonui/dist/accordion.js" // Specific JS component  

  ---

• 3

  Add type definitions for FlyonUI

  Create the global.d.ts file in the project root directory.

  import type { IStaticMethods } from "flyonui/flyonui";
  
  declare global {
    interface Window {
      // Optional third-party libraries
      _;
      $: typeof import("jquery");
      jQuery: typeof import("jquery");
      DataTable;
      Dropzone;
  
      // FlyonUI
      HSStaticMethods: IStaticMethods;
    }
  }
  
  export {};  

  Note: If you want to include specific js component

  import { HSAccordion } from "flyonui/flyonui";
  
  declare global {
    interface Window {
      // Specific JS component
      HSAccordion: typeof HSAccordion;
    }
  }
  
  export {};  

  ---

• 4

  Add the FlyonUI JavaScript

  Include FlyonUI JavaScript to the root_directory/angular.json file.

  {
    ...
    "projects": {
      "angular": {
        ...
        "architect": {
          "build": {
            ...
            "options": {
              ...
              "scripts": [
                // Optional third-party libraries
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/lodash/lodash.min.js",
                "node_modules/dropzone/dist/dropzone-min.js",
                "node_modules/nouislider/dist/nouislider.min.js",
                "node_modules/datatables.net/js/dataTables.min.js",
  
                // FlyonUI
                "node_modules/flyonui/flyonui.js"
              ],
              ...
            }
            ...
          }
          ...
        }
        ...
      }
      ...
    }
    ...
  }

  Note: If you want to include specific js component:

  "scripts": [
    "node_modules/flyonui/dist/accordion.js"  // Specific JS Component
  ],      
  

  ---

• 5

  Add a reinitialization helper

  Add code that reinitializes the components every time the page is refreshed to your app. root_directory/src/app/app.component.ts.

  ...
  import { Router, Event, NavigationEnd } from '@angular/router';
  
  @Component({
    ...
  })
  
  export class AppComponent {
    constructor(private router: Router) {
      ...
    }
  
    ngOnInit() {
      this.router.events.subscribe((event: Event) => {
        if (event instanceof NavigationEnd) {
          setTimeout(() => {
            if (typeof window !== 'undefined' && window.HSStaticMethods) {
              window.HSStaticMethods.autoInit();
            }
          }, 100);
        }
      });
    }
  }

  Note: If you want to include specific js component

  if (event instanceof NavigationEnd) {
    setTimeout(() => {
      if (typeof window !== 'undefined' && window.HSAccordion) {
        window.HSAccordion.autoInit();   // Add particular component `autoInit()` method
      }
    }, 100);
  }