Angular

Angular 17+ is offically supported by the library. The integration uses a minimal, signals-first API. You provide a global locale and call a hook in your components to get t / n / d / setLocale. No pipes or services required.

Installation

pnpm

pnpm add @ardinsys/intl @ardinsys/intl-ng

npm

npm install @ardinsys/intl @ardinsys/intl-ng

Usage

We’ll use the global seeder approach (recommended). This lets you define app-wide messages, number, and date-time formats once, then merge component-local bundles where needed.

Assume @/ aliases your src directory.

Create internalization/index.ts with your seeded instance:

// src/internalization/index.ts
import { createSeededIntl } from "@ardinsys/intl-ng";
import { seedBundles } from "./seed-bundles"; // see Quick start for shape

// useIntl is a strongly-typed hook based on your seed bundles
export const { useIntl } = createSeededIntl(seedBundles);

To see what seedBundles is please refer to the Quick start guide

Register the global provider

Provide the initial locale at app bootstrap so every component can inject it.

// src/main.ts
import { bootstrapApplication } from "@angular/platform-browser";
import { provideIntl } from "@ardinsys/intl-ng";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
  providers: [
    provideIntl("en"), // default locale
  ],
});

Or alternatively if you don't use standalone bootstrap:

// src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { provideIntl } from "@ardinsys/intl-ng";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    provideIntl("en"), // default locale
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Using the hook in components

Import the hook anywhere and optionally pass component-local messages. Global seed data is always available.

// src/app/my-component.component.ts
import { Component, signal } from "@angular/core";
import { useIntl } from "@/internalization";

const local = {
  en: { messages: { test: "This is a message from {name}" } },
  hu: { messages: { test: "Ez egy üzenet tőle {name}" } },
} as const;

@Component({
  selector: "my-component",
  template: `
    <div>{{ i.t("test", { name: name() }) }}</div>

    <button (click)="i.setLocale('hu')">HU</button>
    <button (click)="i.setLocale('en')">EN</button>
  `,
})
export class SomeComponent {
  i = useIntl(local);
  name = signal("John");
}