FESTO UI

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.

Example:

{
  "projects": {
    "projectName": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "node_modules/@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css",
              "node_modules/@festo-ui/angular/css/bundle.css"
            ],
            ...

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

Modules

After installation you have to import the FestoAngularModule 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';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, FestoAngularModule, AppRoutingModule],
  providers: []
})
export class AppModule {}