Localization

Two providers cover the whole library: one for the locale it formats dates, times and numbers in, one for its built-in strings. Both take a signal, so an app that switches language at runtime is covered — with any translation library, or none.

Locale

Dates, times, numbers, currencies, the first day of the week, which days are the weekend and how week numbers are counted all follow one BCP 47 tag. Set it once:

import { provideBuiLocale } from 'ng-blatui';

export const appConfig: ApplicationConfig = {
  providers: [provideBuiLocale('fr-BE')],
};

This page's locale

Nothing below takes a locale input — they all read the provider.

Date picker

Time, in the locale's clock

Amount

Calendar — first day, weekend and week numbering follow the locale

September 2026

#	Sun	Mon	Tue	Wed	Thu	Fri	Sat
36
37
38
39
40
41

If you set nothing, you get en-US — that is Angular's own default for LOCALE_ID, not a choice ng-blatui makes. It is the single most common reason pickers stay American in an app that is not.

Resolution runs most-specific first: a component's own [locale] input → provideBuiLocale() → the app's LOCALE_ID → en-US. You never need registerLocaleData() for ng-blatui: it formats through Intl, which every browser already carries. That import is only for Angular's own date / number pipes.

The switcher above is not a trick for the docs — it is this site's own configuration:

// This very site, in app.config.ts — a signal owned by a service,
// which is the same shape a translation library's service is reached in.
providers: [provideBuiLocale(() => inject(DemoLocale).locale)];

Strings

Every user-facing string that is not already a component input — mostly aria-labels on icon-only controls, plus a little visible micro-copy — lives in one flat, typed BuiLabels interface. Override the keys you care about; the rest keep their English defaults.

import { provideBuiLabels } from 'ng-blatui';

providers: [
  provideBuiLabels({
    fileUploadDropzone: 'Cliquez ou déposez un fichier',
    fileUploadRemove: 'Supprimer le fichier',
    dataTableSearch: 'Rechercher',
  }),
];

Any single label can also be set per instance, which wins over the app-wide map: <bui-file-upload removeLabel="Retirer" />.

With a translation library

ng-blatui depends on no translation library and knows no translation format. It accepts a signal, which is the one thing every library can produce — directly, or through toSignal() over whatever its change notification is. A factory runs in an injection context, so the library's own service is reachable from inside it.

import { computed, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { provideBuiLabels, provideBuiLocale } from 'ng-blatui';
import { TranslocoService } from '@jsverse/transloco';

providers: [
  // The tag itself — a signal, so a language switch reformats every date on screen.
  provideBuiLocale(() =>
    toSignal(inject(TranslocoService).langChanges$, { initialValue: 'fr' }),
  ),

  // …and the strings, read from your own catalogue.
  provideBuiLabels(() => {
    const transloco = inject(TranslocoService);
    const lang = toSignal(transloco.langChanges$, { initialValue: transloco.getActiveLang() });
    return computed(() => {
      lang(); // re-read whenever the active language changes
      return {
        fileUploadRemove: transloco.translate('ui.file_upload.remove'),
        dataTableSearch: transloco.translate('ui.data_table.search'),
      };
    });
  }),
];

The same shape works for ngx-translate (onLangChange), a custom signal store, or anything else. What ng-blatui is handed is already-resolved strings, never keys and never a file to load — so your catalogue stays where it is, in your own library's format.

With Angular's compile-time i18n ($localize), there is nothing reactive to bridge: each build is one language, so a plain map is exactly right.

providers: [
  provideBuiLabels({ fileUploadRemove: $localize`Remove file` }),
];

Right-to-left

Layout is written in logical properties throughout, so RTL needs no locale wiring and no separate stylesheet — set the document direction and the whole library mirrors.

<html dir="rtl" lang="ar">