Lqvrent UI - Internationalization

The default language of lqvrent-ui is English. If you want to use other languages, you can follow the instructions below.

Default i18n language

The library provides several configuration tokens for global configuration of international copy and date, LUI_I18N for the international copy, and LUI_DATE_CONFIG for date-related features. In addition, we use Angular's language pack for date formatting by default (need to introduce the corresponding Angular language pack).

In addition, we also provide an optional LUI_DATE_LOCALE for date-fns mode to format local dates (depending on the date-fns library, read How to use date-fns for date formatting below).

/** config angular i18n **/
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

/** config lqvrent-ui i18n **/
import { provideLuiI18n, en_US } from '@lqvrent-workspace/lqvrent-ui/i18n';

/** set the default i18n config **/
@NgModule({
  providers: [
    provideLuiI18n(en_US)
  ]
})
export class AppModule {}

Work with Angular localize

When using @angular/localize, the library should keep the same localization with angular via LOCALE_ID.

/** import all locales data **/
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import fr from '@angular/common/locales/fr';
registerLocaleData(en);
registerLocaleData(fr);

/** config lqvrent-ui i18n **/
import { LUI_I18N, en_US, fr_FR } from '@lqvrent-workspace/lqvrent-ui/i18n';

/** switch lqvrent-ui locales via LOCALE_ID **/
@NgModule({
  providers: [
    {
      provide: LUI_I18N,
      useFactory: () => {
        const localId = inject(LOCALE_ID);
        switch (localId) {
          case 'en':
            return en_US;
          /** keep the same with angular.json/i18n/locales configuration **/
          case 'fr':
            return fr_FR;
          default:
            return en_US;
        }
      }
    }
  ]
})
export class AppModule {}

Service

The library provides an LuiI18nService service to switch the language at runtime.

import { LuiI18nService, en_US } from '@lqvrent-workspace/lqvrent-ui/i18n';

// ...

constructor(private i18n: LuiI18nService) {}

switchLanguage() {
  this.i18n.setLocale(en_US);
}

Note: en_US is the package name, follow below.
Supported languages:

Language	Package name
English	`en_US`
French	`fr_FR`

How to format a date using date-fns

For date formatting, we use Angular's DatePipe (syntax reference) to implement (depending on Angular's locale language pack), but due to Angular's own DatePipe is not implemented according to the ISO standard algorithm (issue #25380), the week number may not match expectations (related issues: #2406, #2819).

So we have a date-fns method (syntax reference) for standard date formatting, you can switch to it by the following way (after switching, it will affect the date formatting of all date related components such as Calendar/Date picker):

import { LUI_DATE_LOCALE, LuiI18nService } from '@lqvrent-workspace/lqvrent-ui/i18n';
import { enUS, fr } from 'date-fns/locale';

@NgModule({
  // ...
  providers: [
    // Set the value of LUI_DATE_LOCALE in the application root module to activate date-fns mode
    { provide: LUI_DATE_LOCALE, useValue: enUS }
  ]
})
export class AppModule {
  constructor(private i18n: LuiI18nService) { }

  // ...

  switchLanguage() {
    this.i18n.setDateLocale(fr); // Switch language to French at runtime
  }
}

After the switch is successful, you can also choose to remove the dependency on the Angular Locales package (remove the code below) to reduce the package size:

// The following code can be removed as needed
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

LUI_DATE_CONFIG (Date global configuration)

The configuration is as follows:

{
  // Specify which day is the beginning of the week (null for default, 0 for Sunday, 1 for Monday, and so on)
  firstDayOfWeek: null
}

Language supported by date-fns

https://date-fns.org/docs/I18n#supported-languages

How to override internationalization configuration

The text of some components in the library depends on the internationalized text, such as the autotips in the forms.
At this time, you can modify the internationalization configuration to change the text content:

import { LUI_I18N, en_US } from '@lqvrent-workspace/lqvrent-ui/i18n';

const customLanguagePack = {
  en_US,
  ...{
    form: {
      autotips: {
        required: 'Ce champ est obligatoire',
      }
    }
  }
}

@NgModule({
  ...
  providers   : [
    { provide: LUI_I18N, useValue: customLanguagePack }
  ]
})
export class AppModule { }

Introduction

Core

Internationalization