Angular

All components are standalone, use signal inputs / models, and work with zoneless change detection.

Setup

import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';
import { provideThlUI } from '@thl-ui/angular';

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(),
    provideThlUI({ locale: 'en', theme: 'green', persist: true, components: { Table: { pageSize: 25 } } }),
  ],
});

Add the CSS in angular.json → styles: ["node_modules/@thl-ui/styles/dist/thl-ui.css"].

Importing components

Import what you use, or everything at once with THL_UI:

import { ThlButtonComponent, ThlCardComponent, ThlTranslatePipe, THL_UI } from '@thl-ui/angular';

@Component({
  selector: 'app-demo',
  imports: [ThlButtonComponent, ThlCardComponent, ThlTranslatePipe], // or: imports: [THL_UI]
  template: `
    <thl-card [title]="'menu.dashboard' | thlT">
      <button thl-button variant="primary" icon="download">Download</button>
    </thl-card>`,
})
export class DemoComponent {}

Buttons and inputs are attribute components on native elements (button[thl-button], a[thl-button], input[thlInput], table[thlTable]) so native semantics, forms and a11y are preserved.

Services

Service	Use
ThlConfigService	config() signal, set(patch), prefix(), defaults(name, props)
ThlI18nService	t(), n(), d(), locale() signal, setLocale()
ThlToastService	success/info/warning/error/show/dismiss
ThlModalService	confirm(options): Promise<boolean>

Pipe: {{ 'common.save' | thlT }} · {{ 'pagination.total' | thlT: { count: n } }}.

Two-way binding & forms

Every control implements ControlValueAccessor and exposes a signal model, so all three styles work:

<thl-select [(value)]="country" [options]="countries" />
<thl-select [(ngModel)]="country" [options]="countries" />
<thl-select formControlName="country" [options]="countries" />

Reactive Forms validation uses the same core rules, with i18n messages rendered by thl-field:

import { thlValidators, rules } from '@thl-ui/angular';

form = new FormGroup({
  email: new FormControl('', thlValidators(rules.required(), rules.email())),
});

<thl-field [label]="'pages.login.email' | thlT" for="email" required [control]="form.controls.email">
  <input thlInput id="email" formControlName="email" />
</thl-field>

Content projection

Templates replace React render props / Vue scoped slots:

<thl-tabs [items]="tabs" [(active)]="tab">
  <ng-template thlTab="home"><p>Home</p></ng-template>
  <ng-template thlTab="profile"><p>Profile</p></ng-template>
</thl-tabs>

<thl-data-table [data]="rows" [columns]="cols" rowKey="id">
  <ng-template thlCell="salary" let-row>{{ row.salary | currency }}</ng-template>
</thl-data-table>

Routing (AppLayout)

<thl-app-layout [menu]="menu" [currentPath]="path()" [user]="user">
  <ng-template thlMenuLink let-item let-cls="cls" let-content="content">
    <a [routerLink]="item.href" [class]="cls"><ng-container [ngTemplateOutlet]="content" /></a>
  </ng-template>
  <router-outlet />
</thl-app-layout>