CSS framework and utils to build FESTO web applications

Downloads in past


4.0.13 days agoa year agoMinified + gzip package size for @festo-ui/angular in KB



Angular Component Library

Getting started

Festo Angular comes as a NPM package. Oh you don't know NPM? Then you must start a bit further at Node.js.
If you want to use the Festo Angular library with your Angular project then this command is the way to go:
npm install @festo-ui/angular

Peer dependencies

We have set the @festo-ui/web-essentials and the @angular/cdk as peer dependency. Make sure you have it installed:
npm install @festo-ui/web-essentials
npm install @angular/cdk

Required CSS

You should add the CSS files to your angular.json file to load the styles when your Angular projects get built.
  "projects": {
    "projectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [

If you only want to load the styles for popovers or image gallery you can use following paths: - node_modules/@festo-ui/angular/css/popover.css - node_modules/@festo-ui/angular/css/iamge-gallery.css


After installation you have to import the FestoAngularModule and the BrowserAnimationsModule to your root module (called app.module.ts in the majority of projects). Have a look at the following example:
import { FestoAngularModule } from '@festo-ui/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, FestoAngularModule, AppRoutingModule],
  providers: []
export class AppModule {}