Skip to main content
This guide walks you through installing and configuring the FlowX.AI Angular UI Toolkit in your Angular application.

​
Prerequisites

Before installing the Angular UI Toolkit, ensure you have:
  • Node.js 16.x or higher installed
  • An existing Angular project (version 14.x or higher)
  • npm or yarn package manager
If you don’t have an Angular project yet, create one using the Angular CLI: ng new my-flowx-app

​
Installation

Follow these steps to install and configure the Angular UI Toolkit:
1

Install the package

Install the Angular UI Toolkit package using your preferred package manager:
npm install @flowx/ui-toolkit-angular
Use the --save-exact flag to lock the version and ensure consistent builds across your team.
2

Install peer dependencies

The Angular UI Toolkit requires several peer dependencies for full functionality:
npm install @angular/cdk @angular/forms @angular/common
If you created your project with Angular CLI, most of these dependencies are already installed.
3

Import required modules

Import the UI Toolkit modules you need in your Angular module. You can import individual component modules or the entire toolkit:Import specific components (recommended for smaller bundle size):
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Import individual component modules
import { FlxButtonModule } from '@flowx/ui-toolkit-angular/button';
import { FlxInputModule } from '@flowx/ui-toolkit-angular/form-controls/input';
import { FlxCardModule } from '@flowx/ui-toolkit-angular/card';
import { FlxModalModule } from '@flowx/ui-toolkit-angular/modal';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Required for animations
    FlxButtonModule,
    FlxInputModule,
    FlxCardModule,
    FlxModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Import all components (simpler but larger bundle):
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlxUIToolkitModule } from '@flowx/ui-toolkit-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FlxUIToolkitModule // Includes all components
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
For production applications, import only the modules you use to keep your bundle size optimized.
4

Add stylesheet imports

Add the FlowX.AI UI Toolkit styles to your global stylesheet or angular.json:Option 1: Import in styles.scss
styles.scss
// Import FlowX UI Toolkit base styles
@import '@flowx/ui-toolkit-angular/styles/theme';
@import '@flowx/ui-toolkit-angular/styles/core';
Option 2: Add to angular.json
angular.json
{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/@flowx/ui-toolkit-angular/styles/theme.css",
              "node_modules/@flowx/ui-toolkit-angular/styles/core.css"
            ]
          }
        }
      }
    }
  }
}
5

Configure for standalone components (Angular 14+)

If you’re using Angular standalone components, import modules directly in your component:
app.component.ts
import { Component } from '@angular/core';
import { FlxButtonModule } from '@flowx/ui-toolkit-angular/button';
import { FlxInputModule } from '@flowx/ui-toolkit-angular/form-controls/input';
import { FlxCardModule } from '@flowx/ui-toolkit-angular/card';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    FlxButtonModule,
    FlxInputModule,
    FlxCardModule
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Your component logic
}

​
Verify installation

Test that the installation was successful by using a component in your template:
app.component.html
<div class="container">
  <flx-card>
    <h1>Welcome to FlowX.AI</h1>
    <p>The Angular UI Toolkit is installed and ready to use!</p>
    <flx-button variant="primary">Get Started</flx-button>
  </flx-card>
</div>
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'FlowX.AI Application';
}
Run your development server: 
ng serve
You should see the card with the button rendered in your browser at http://localhost:4200.

​
Module imports reference

Here are the import paths for all available components:

​
Form controls

import { FlxInputModule } from '@flowx/ui-toolkit-angular/form-controls/input';
import { FlxTextareaModule } from '@flowx/ui-toolkit-angular/form-controls/textarea';
import { FlxCheckboxModule } from '@flowx/ui-toolkit-angular/form-controls/checkbox';
import { FlxRadioModule } from '@flowx/ui-toolkit-angular/form-controls/radio';
import { FlxSelectModule } from '@flowx/ui-toolkit-angular/form-controls/select';
import { FlxMultiSelectModule } from '@flowx/ui-toolkit-angular/form-controls/multi-select';
import { FlxSegmentedButtonModule } from '@flowx/ui-toolkit-angular/form-controls/segmented-button';
import { FlxSwitchModule } from '@flowx/ui-toolkit-angular/form-controls/switch';
import { FlxDatepickerModule } from '@flowx/ui-toolkit-angular/form-controls/datepicker';
import { FlxValueSliderModule } from '@flowx/ui-toolkit-angular/form-controls/value-slider';

​
Containers

import { FlxAccordionModule } from '@flowx/ui-toolkit-angular/accordion';
import { FlxCardModule } from '@flowx/ui-toolkit-angular/card';
import { FlxModalModule } from '@flowx/ui-toolkit-angular/modal';
import { FlxTabBarModule } from '@flowx/ui-toolkit-angular/tab-bar';

import { FlxBreadcrumbsModule } from '@flowx/ui-toolkit-angular/breadcrumbs';
import { FlxStepperModule } from '@flowx/ui-toolkit-angular/stepper';

​
UI elements

import { FlxButtonModule } from '@flowx/ui-toolkit-angular/button';
import { FlxIconModule } from '@flowx/ui-toolkit-angular/icon';
import { FlxMessageModule } from '@flowx/ui-toolkit-angular/message';
import { FlxSpinnerModule } from '@flowx/ui-toolkit-angular/spinner';
import { FlxToastModule } from '@flowx/ui-toolkit-angular/toast';
import { FlxTooltipModule } from '@flowx/ui-toolkit-angular/tooltip';

​
Advanced components

import { FlxChatModule } from '@flowx/ui-toolkit-angular/chat';
import { FlxDocumentViewerModule } from '@flowx/ui-toolkit-angular/document-viewer';
import { FlxFileUploadModule } from '@flowx/ui-toolkit-angular/file-upload';
import { FlxNestedSelectModule } from '@flowx/ui-toolkit-angular/nested-select';

​
Troubleshooting

​
Module not found errors

If you encounter module resolution errors, ensure that your tsconfig.json has the correct path mappings:
tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@flowx/ui-toolkit-angular/*": [
        "node_modules/@flowx/ui-toolkit-angular/*"
      ]
    }
  }
}

​
Styles not loading

If component styles aren’t appearing:
  1. Verify that you’ve imported the required stylesheets
  2. Check that BrowserAnimationsModule is imported in your app module
  3. Clear your Angular build cache: rm -rf .angular/cache
  4. Restart your development server

​
Version conflicts

If you experience peer dependency warnings: 
npm install --legacy-peer-deps
Or update your Angular version to match the toolkit requirements.

​
Next steps

Now that you have the Angular UI Toolkit installed, you’re ready to start building:

Component library

Explore all available components with interactive examples.

Theming

Customize component styles to match your brand.

Form controls

Learn how to build forms with validation.

Containers

Build layouts with container components.

Build docs developers (and LLMs) love

Get started for freeTalk to us