Internationalization and RTL

Three separate responsibilities

Language describes your application’s translated text. Locale configures regional formatting in components that consume it. Direction specifies LTR or RTL. They can be related, but changing one does not automatically configure the other two.

The language selector on this documentation site is not a Core API for another application.

Set optional regional defaults

Use provideNeuralUI for a shared locale and, when relevant, an IANA timeZone. The default locale comes from Angular LOCALE_ID. Your application still supplies labels and validation messages. These settings do not imply universal automatic translation or a reactive global language switch.

import { ApplicationConfig } from '@angular/core';
import { provideNeuralUI } from '@neural-ui/core';

export const appConfig: ApplicationConfig = {
  providers: [provideNeuralUI({ locale: 'es-ES', timeZone: 'Europe/Madrid' })],
};

See locale-dependent Calendar formatting

Calendar consumes the global locale unless its locale input overrides it. This example passes en-US or es-ES explicitly so you can compare the month and weekday labels on this bilingual page. selectedDate is a fixed day; selection remains owned by the application. Calendar’s built-in EN/ES labels are specific to Calendar, not a universal Core translation service.

Apply direction to a surface

Set dir="rtl" on the intended document or surface. In Tabs, left/right arrows move focus according to the computed direction; Enter or Space activates the focused tab. Try the keyboard below. dir changes direction, not the language of the supplied labels. Use logical CSS properties for your own layout.

Keep server and browser settings aligned

Supply the same initial regional settings and translated text on server and browser. Do not silently replace an editable value when changing display language. Test your application’s supported locales and directions, including mixed-language content.