@wlcm/angular

Angular 22.2 component library: button, datepicker, filters, forms, phone-input, search-field, stepper and table, published as sub-path entry points (e.g. @wlcm/angular/button). Theming is built on Angular Material M3.

Installation

npm install @wlcm/angular

Peer dependencies: @angular/core, common, forms, @angular/material, @angular/cdk and @angular/material-date-fns-adapter (^22.2.0), rxjs (^7.8.0) and date-fns (^4.1.0). The library doesn't import @angular/compiler, platform-browser, platform-browser-dynamic, router or animations, so none of those are peers. Node must satisfy Angular 22.2's range (^22.22.3 || ^24.15.0 || >=26).

Usage

Import components standalone, using the 2025 class names, and add any required providers in app.config.ts:

// app.ts
import { Component } from '@angular/core';
import { WlcmFormField, WlcmLabel, WlcmInput, WlcmSelect } from '@wlcm/angular/forms';
import { WlcmButton } from '@wlcm/angular/button';

@Component({
  selector: 'app-root',
  imports: [WlcmFormField, WlcmLabel, WlcmInput, WlcmSelect, WlcmButton],
  templateUrl: './app.html',
})
export class App {}

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideWlcmDatepicker } from '@wlcm/angular/datepicker';
import { provideWlcmFormErrors } from '@wlcm/angular/forms';
import { FORM_ERRORS } from './form-errors.constants';

export const appConfig: ApplicationConfig = {
  providers: [
    provideWlcmDatepicker(), // required to use the datepicker
    provideWlcmFormErrors(FORM_ERRORS), // optional: custom error messages
  ],
};

Controls work with reactive forms:

<form [formGroup]="form">
  <wlcm-form-field>
    <wlcm-label>First name</wlcm-label>
    <input wlcmInput formControlName="firstName" />
  </wlcm-form-field>
</form>

and with Signal Forms (FormField from @angular/forms/signals, f = form(model)):

<wlcm-form-field>
  <wlcm-label>First name</wlcm-label>
  <input wlcmInput [formField]="f.firstName" />
</wlcm-form-field>

Component state is exposed as signals, e.g. filtersGroup().size() (filters) or table().selectionModel.selected() (table).

The library is zoneless-first and every component relies on Angular's default OnPush change detection (it isn't declared explicitly).

Theming

Apply an Angular Material M3 theme with mat.theme(), then include the library theme:

@use '@angular/material' as mat;
@use '@wlcm/angular' as wlcm;

html {
  @include mat.theme(
    (
      color: (
        primary: mat.$azure-palette,
      ),
    )
  );
  @include wlcm.theme(
    (
      typography: (
        bold-font-family: 'Montserrat-Bold',
        medium-font-family: 'Montserrat-Medium',
        regular-font-family: 'Montserrat-Regular',
      ),
    )
  );
}

Component styles consume the Material --mat-sys-* system tokens emitted by mat.theme(). The library's own --wlcm-* custom properties cover only the three font tiers (--wlcm-{bold,medium,regular}-font-{family,weight}) and the loader size (--wlcm-loader-size).

Migrating

Upgrading from @wlcm/[email protected]: follow docs/migration-22.0-to-22.2.md, which has a checklist and one section per breaking change. After bumping dependencies, run the rename codemod to move class names to the 2025 style-guide names it introduces: node <angular-wlcm>/builders/codemods/rename-classes.mjs --mode=consumer --tsconfig=tsconfig.json.

Upgrading from @wlcm/angular v21: read docs/angular-22-upgrade.md first for the v21→v22.0 changes (signal inputs/outputs, the WlcmStep signal contract, the removed button type input, Material M3 theming), then continue with the 22.0→22.2 guide above.

Development

• npm start — serve the sandbox app
• npx nx test <project> — run unit tests for a project (Vitest)
• npx nx lint <project> — lint a project
• npm run build — build all publishable entry points into dist/
• npx nx run sandbox:ssr-smoke — prerender the sandbox in Node and fail on browser-global access during SSR