@pico-intl-dev/angular

Angular 21+ standalone bindings for pico-intl.

Status: stable v1 for Angular 21+ standalone apps covered by the published npm adoption fixture. Built with ng-packagr partial compilation and tested for DI, service signals, pipes, locale changes, fallback, and ordinal translations.

Install

npm install @pico-intl-dev/core @pico-intl-dev/angular @angular/core

Provider setup

// app.config.ts
import { type ApplicationConfig } from '@angular/core';
import { createI18n } from '@pico-intl-dev/core';
import { providePicoIntl } from '@pico-intl-dev/angular';

const i18n = createI18n({
  base: 'en',
  locale: 'en',
  messages: { greeting: 'Hello, {{name}}' },
});

export const appConfig: ApplicationConfig = {
  providers: [providePicoIntl(i18n)],
};

Component usage

import { Component, inject } from '@angular/core';
import { PicoIntlService, TranslatePipe } from '@pico-intl-dev/angular';

@Component({
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <h1 [attr.dir]="i18n.dir()">{{ 'greeting' | translate:{ name: 'Ana' } }}</h1>
    <button (click)="switchLocale()">Spanish</button>
  `,
})
export class GreetingComponent {
  readonly i18n = inject(PicoIntlService);

  switchLocale() {
    void this.i18n.setLocale('es');
  }
}

API

| Export | Purpose | | --- | --- | | providePicoIntl(i18n) | Standalone provider setup | | PicoIntlService | Injectable signal-backed service with locale(), dir(), and isRTL() | | TranslatePipe | translate pipe | | OrdinalTranslatePipe | ordinalTranslate pipe | | PICO_INTL_INSTANCE | Injection token for raw instance | | PicoIntlTranslatePipe | Alias for TranslatePipe |

Production notes

• The published Angular package is generated from packages/angular/dist.
• The v1 peer floor tracks the Angular major version covered by CI and published adoption fixtures.
• Older Angular versions may work, but they are not part of the stable v1 compatibility promise.

Verification

npm run build:adapters
npm run test:integration:angular