• Set up FlyonUI with Angular using Tailwind CSS

Set up FlyonUI with Angular using Tailwind CSS

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

https://cdn.flyonui.com/fy-assets/icons/angular-icon.png
Angular logo

Quick Angular setup

Angular is a JavaScript framework for building dynamic web applications. If you haven't set up Tailwind CSS yet, check out Angular Tailwind CSS installation guides.

FlyonUI + Angular Checkout the Starter Kit
  • 1
    Install FlyonUI

    Install flyonui via npm.

    npm i flyonui
  • 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"; // Add only if node_modules is gitignored

/* 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);
}

Icons

For icons setup you can refer Icons page.