Document language
Keep the page's lang attribute on the language the interface is displayed in, so screen readers pronounce it correctly.
provideDocumentLang() keeps <html lang> on the active Transloco language (RGAA 8.4 / WCAG 3.1.1), whichever
control changed it — the user menus, the user-profile form, a host dialog.
Minimal example
import { ApplicationConfig } from "@angular/core";
import { provideTransloco } from "@jsverse/transloco";
import { provideDocumentLang } from "@sinequa/atomic-angular";
export const appConfig: ApplicationConfig = {
providers: [
provideTransloco({ config: { availableLangs: ["en", "fr"], defaultLang: "en" } }),
provideDocumentLang(),
],
};How it works
The provider is an environment initializer that subscribes to TranslocoService.langChanges$ and writes the
value to document.documentElement.lang. langChanges$ replays the current language on subscription, so the
attribute is set at start-up too, then follows every change. The subscription ends with the injector.
It does nothing when Transloco is not provided, and ignores an empty language.
Pitfalls
What's next
Bootstrap the application
Sign the user in and initialize the application's stores — and, optionally, its dynamic routes — before the first view renders.
Cross-cutting interceptors
Three Angular HttpInterceptorFn covering requests the atomic client never sees — the ui-language body field, audit metadata, and 401 recovery on the HttpClient channel.