angular.md

Angular

We provide a dedicated npm package for Angular, designed to simplify the utilization of our web components. Check out the instructions in this guide to learn how to use it.

For additional assistance with the implementation, you can also examine the Angular demo and its accompanying code.

Setup

1. Install the web components and the angular library:

   npm install @six-group/ui-library
   npm install @six-group/ui-library-angular

With Standalone Bootstrapping

This section explains how to configure web-components in an Angular application that uses standalone bootstrapping api. Check below for configuring web components with Angular modules.

1. Add UiLibraryAngularModule to your ApplicationsConfigs providers

   import { UiLibraryAngularModule } from '@six-group/ui-library-angular';
   import { ApplicationConfig, importProvidersFrom } from '@angular/core';
   
   export const appConfig: ApplicationConfig = {
     providers: [importProvidersFrom(UiLibraryAngularModule.forRoot())],
   };

2. Import the SIX styles to your global styles.scss file (usually located at src/styles.scss):

   @import '@six-group/ui-library/dist/ui-library/ui-library.css';

3. In each standalone component, import the UiLibraryAngularModule module to get access to web-components components.

   @Component({
     selector: "some",
     imports: [UiLibraryAngularModule],
     templateUrl: "./some.component.html",
     styleUrl: "./some.component.scss"
   })
   export class SomeComponent {}
   

With Module Bootstrapping

This section explains how to configure web-components in an Angular application that uses NgModule.

1. Add UiLibraryAngularModule.forRoot() to your root angular module imports section.

   @NgModule({
    declarations: [],
    imports: [
      UiLibraryAngularModule.forRoot()
    ]
   })

2. If your project contains child modules, add the UiLibraryAngularModule (without the forRoot()) to those too.

3. Import the SIX styles to your global styles.scss file (usually located at src/styles.scss):

   @import '@six-group/ui-library/dist/ui-library/ui-library.css';

Using the Components

The components can be utilized just like any other Angular component. However, there's one caveat: while you'll receive code completion for attributes/properties of the component, code completion for events provided by the components is currently unavailable. Please check the components documentation for available events.

Forms

Form components like six-input work seamlessly in Angular forms, both in template-driven and reactive forms.

An objective of the SIX library is to ensure a consistent look and feel across all applications. Hence, the SIX Library takes on the responsibility of displaying error messages, when appropriate. For instance, it avoids displaying the message if the form is pristine, even if a field is marked as invalid.

Error Message Translations

To select the correct translation, your need to set the lang attribute on the html element. Supported languages are en, de, it and fr. Refer to the Angular example for a concrete implementation.

Form Directive

From a usability standpoint, we consider that users should always be allowed to submit a form, even if it contains invalid values The library comes with an additional utility to aid in the process of displaying errors after the user clicked on the submit button.

The SixFormDirective provides a way to set all fields as dirty and touched, and focusing on the first field that contains an error.

To use it, simply add the sixForm directive and replace ngSubmit with sixSubmit:

<!-- add sixForm and replace (ngSubmit) with (sixSubmit) -->
<form sixForm (sixSubmit)="onSubmit()" [formGroup]="form">
  <six-input>...</six-input>
  <six-button [submit]="true">Submit</six-button>
</form>

Consult the Angular example and the source code documentation of the SixFormDirective and for a more flexible alternative, the SixFormUtilDirective.