@archon-js/angular

Angular 20 standalone bindings for Archon — headless engine bridge plus a default themed date picker.

Install

Peer dependencies: @angular/core, @angular/common, @angular/forms, @angular/cdk, @archon-js/core, @archon-js/adapter-native.

Usage

import { bootstrapApplication } from '@angular/platform-browser';
import { provideArchon, ArchonDatePickerComponent } from '@archon-js/angular';

bootstrapApplication(App, {
  providers: [provideArchon({ locale: 'en-US' })],
});

<archon-date-picker />

Import @archon-js/theme-default CSS variables in your global styles for theming. Override any --archon-* token (or pass custom SCSS) — the picker never hard-locks a theme.

Masking (pluggable)

Default uses Core maskByDatePattern. Plug ngx-mask / IMask / custom via callback:

// Per picker
<archon-date-picker [maskInput]="myMask" placeholder="dd/MM/yyyy" />

// App-wide
providers: [{ provide: ARCHON_INPUT_MASK, useValue: myMask }]
// Disable globally: useValue: false

import type { InputMaskFn } from '@archon-js/core';
const myMask: InputMaskFn = (raw, ctx) => /* adapt ngx-mask here */ raw;

Build note

This package compiles with tsc (no ng-packagr workspace yet). Template and style assets are copied to dist/theme-default/ after compile. Consumer apps should resolve @archon-js/angular via workspace path mapping until packages are published.

For production libraries, migrate to ng-packagr with partial Ivy compilation.