Angular #

To install aFP Design System inside your Angular project you can use this command to add the corresponding package.

npm install @afp-design-system/angular

pnpm add @afp-design-system/angular @afp-design-system/core

Import Module #

The aFP Design System need to be imported in the Angular module or standalone component. Here's an example for the app.module.ts:

import { NgModule } from '@angular/core';
import { AfpDesignSystemModule } from '@afp-design-system/angular';

@NgModule({
   ...
   imports: [AfpDesignSystemModule]
})

Usage #

Afterwards you can use the aFP Design System in your own components (.html/.ts), for example like this: In your HTML file:

<afp-button
   [variant]="afpVariant.PRIMARY"
   [disabled]="false"
   (afpClick)="onClick()"
></afp-button>

In your TS file:

import { AfpVariant } from '@afp-design-system/core';

export class YourComponent {
  readonly afpVariant = AfpVariant;

  onClick() {
    console.log("Button was clicked!");
  }
}

Event Handling #

Similar to the event handling from the chapter Usage, you can use Angular's event binding to listen to specific events. In the example above, we can see that a button is created, where the custom function afpClick is bound to a user defined function onClick.

Use default icons #

Alternatively, you can use the setAssetPath function.

Important: Without this step, access to the default Icon library is not possible. The output must be directed to /icons.

The icons from the core library need to be made available in the assets by Angular, depending on the project structure and compiler settings, which can vary from project to project. Here's an example for a Nx setup in the project.json:

{
  ...
  "options": {
    "assets": [
      {
        "glob": "*",
        "input": "node_modules/@afp-design-system/core/dist/icons",
        "output": "assets/icons"
      }
    ]
  },
  ...
}

Reactive Forms #

To use reactive forms in Angular with the aFP Design System, the AfpDesignSystemModule provides the AfpFormAcessor directive.

Here’s an example of how to use AfpFormAcessor 👇

<afp-input
  afpFormAccessor
  formControlName="myControlName"
  [...]
></afp-input>