• Set up FlyonUI with Tailwind CSS Angular

Set up FlyonUI with Tailwind CSS Angular

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

This repository consists of two branches:

  • main: Contains the FlyonUI Starter Kit with Angular, offering a clean and scalable foundation to kickstart your project.
  • components: Showcases practical examples of FlyonUI component usage within a Angular environment
  • 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";  /* 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.