How to use angular-l10n - 10 common examples

import { DevToolsExtension, NgRedux } from '@angular-redux/store';
import { Actions, JsonFormsState, UISchemaTester } from '@jsonforms/core';
import { LocaleValidationModule, TranslationModule } from 'angular-l10n';
import { AppComponent } from './app.component';
import { JsonFormsAngularMaterialModule } from '../../src/module';

import { initialState, rootReducer } from './store';
import { ReduxComponent } from './redux.component';
import logger from 'redux-logger';

@NgModule({
  declarations: [AppComponent, ReduxComponent],
  imports: [
    BrowserModule,
    JsonFormsAngularMaterialModule,
    TranslationModule.forRoot({}),
    LocaleValidationModule.forRoot()
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
  constructor(ngRedux: NgRedux, devTools: DevToolsExtension) {
    let enhancers: any[] = [];
    // ... add whatever other enhancers you want.

    // You probably only want to expose this tool in devMode.
    if (isDevMode() && devTools.isEnabled()) {
      enhancers = [...enhancers, devTools.enhancer()];
    }

    ngRedux.configureStore(rootReducer, initialState, [logger], enhancers);

// ListWithDetail components
    ListWithDetailControl,
    MasterPage,
    DetailPage,

    // other
    LabelRenderer
  ],
  imports: [
    IonicModule,
    IonicSelectableModule,
    JsonFormsModule,
    LocalizationModule,
    LocaleValidationModule.forRoot(),
    TranslationModule.forRoot(emptyL10NConfig)
  ],
  exports: [
    IonicModule,
    IonicSelectableModule,
    JsonFormsModule,
    LocalizationModule,
    LocaleValidationModule,
    TranslationModule
  ],
  entryComponents: [
    // controls
    BooleanCheckboxControlRenderer,
    BooleanToggleControlRenderer,
    StringControlRenderer,
    MultilineControlRenderer,
    NumberControlRenderer,

import { Languages } from './languages';
import { ServerTagsService } from './servers/server-tags.service';

const localePrefix = (environment.web) ? 'https://servers.fivem.net/' : './';

const l10nConfig: L10nConfig = {
	locale: {
		languages: Languages.toList(),
		language: 'en'
	},
	translation: {
		//providers: [] // see AppModule constructor
					  // broke on Angular 8, here again
		providers: [
			{ type: ProviderType.Fallback, prefix: localePrefix + 'assets/languages/locale-en', fallbackLanguage: [] },
			{ type: ProviderType.Static, prefix: localePrefix + 'assets/languages/locale-' }
		]
	}
};

export function localStorageFactory() {
	return (typeof window !== 'undefined') ? window.localStorage : null;
}

export function metaFactory(): MetaLoader {
	return new MetaStaticLoader({
		pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
		pageTitleSeparator: ' / ',
		applicationName: 'FiveM server list'
	});
}

import { Actions, JsonFormsState, UISchemaTester } from '@jsonforms/core';
import { LocaleValidationModule, TranslationModule } from 'angular-l10n';
import { AppComponent } from './app.component';
import { JsonFormsAngularMaterialModule } from '../../src/module';

import { initialState, rootReducer } from './store';
import { ReduxComponent } from './redux.component';
import logger from 'redux-logger';

@NgModule({
  declarations: [AppComponent, ReduxComponent],
  imports: [
    BrowserModule,
    JsonFormsAngularMaterialModule,
    TranslationModule.forRoot({}),
    LocaleValidationModule.forRoot()
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
  constructor(ngRedux: NgRedux, devTools: DevToolsExtension) {
    let enhancers: any[] = [];
    // ... add whatever other enhancers you want.

    // You probably only want to expose this tool in devMode.
    if (isDevMode() && devTools.isEnabled()) {
      enhancers = [...enhancers, devTools.enhancer()];
    }

    ngRedux.configureStore(rootReducer, initialState, [logger], enhancers);
    const example = initialState.examples.data[0];

GroupLayoutRenderer,

    // ListWithDetail components
    ListWithDetailControl,
    MasterPage,
    DetailPage,

    // other
    LabelRenderer
  ],
  imports: [
    IonicModule,
    IonicSelectableModule,
    JsonFormsModule,
    LocalizationModule,
    LocaleValidationModule.forRoot(),
    TranslationModule.forRoot(emptyL10NConfig)
  ],
  exports: [
    IonicModule,
    IonicSelectableModule,
    JsonFormsModule,
    LocalizationModule,
    LocaleValidationModule,
    TranslationModule
  ],
  entryComponents: [
    // controls
    BooleanCheckboxControlRenderer,
    BooleanToggleControlRenderer,
    StringControlRenderer,
    MultilineControlRenderer,

mapAdditionalProps(props: ControlProps) {
    if (!isEmpty(props.schema)) {
      // TODO
      const defaultStep = isNumberControl(this.uischema, this.schema) ? 0.1 : 1;
      this.min = props.schema.minimum;
      this.max = props.schema.maximum;
      this.step = props.schema.multipleOf || defaultStep;
      // this doesn't seem to work reliably; an entered value will be formatted
      // the 1st time when blurring out, but it doesn't work the 2nd time
      // although the internal state seems correct
      this.locale = getLocale(this.ngRedux.getState());
      const pipe = new L10nDecimalPipe(this.localeService);
      this.localeService.setDefaultLocale(this.locale);
      if (this.locale) {
        this.displayValue = pipe.transform(props.data, this.locale);
      } else {
        this.displayValue = props.data;
      }
    }
  }
}

import { Languages } from './languages';
import { ServerTagsService } from './servers/server-tags.service';

const localePrefix = (environment.web) ? 'https://servers.fivem.net/' : './';

const l10nConfig: L10nConfig = {
	locale: {
		languages: Languages.toList(),
		language: 'en'
	},
	translation: {
		//providers: [] // see AppModule constructor
					  // broke on Angular 8, here again
		providers: [
			{ type: ProviderType.Fallback, prefix: localePrefix + 'assets/languages/locale-en', fallbackLanguage: [] },
			{ type: ProviderType.Static, prefix: localePrefix + 'assets/languages/locale-' }
		]
	}
};

export function localStorageFactory() {
	return (typeof window !== 'undefined') ? window.localStorage : null;
}

export function metaFactory(): MetaLoader {
	return new MetaStaticLoader({
		pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
		pageTitleSeparator: ' / ',
		applicationName: 'FiveM server list'
	});
}

missingValue: 'No key'
    }
};

export function loadConfig(oidcConfigService: OidcConfigService) {
    console.log('APP_INITIALIZER STARTING');
    return () => oidcConfigService.load(`${window.location.origin}/api/ClientAppSettings`);
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        routing,
        HttpClientModule,
        TranslationModule.forRoot(l10nConfig),
        DataEventRecordsModule,
        AuthModule.forRoot(),
    ],
    declarations: [
        AppComponent,
        ForbiddenComponent,
        HomeComponent,
        UnauthorizedComponent,
        SecureFilesComponent
    ],
    providers: [
        OidcConfigService,
        OidcSecurityService,
        {
            provide: APP_INITIALIZER,
            useFactory: loadConfig,

missingValue: 'No key'
    }
};

export function loadConfig(oidcConfigService: OidcConfigService) {
    console.log('APP_INITIALIZER STARTING');
    return () => oidcConfigService.load(`${window.location.origin}/api/ClientAppSettings`);
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        routing,
        HttpClientModule,
        TranslationModule.forRoot(l10nConfig),
        DataEventRecordsModule,
        AuthModule.forRoot(),
    ],
    declarations: [
        AppComponent,
        ForbiddenComponent,
        HomeComponent,
        UnauthorizedComponent,
        SecureFilesComponent
    ],
    providers: [
        OidcConfigService,
        OidcSecurityService,
        {
            provide: APP_INITIALIZER,
            useFactory: loadConfig,

import { AuthorizationCanGuard } from './authorization.can.guard';

const l10nConfig: L10nConfig = {
    locale: {
        languages: [
            { code: 'en', dir: 'ltr' },
            { code: 'it', dir: 'ltr' },
            { code: 'fr', dir: 'ltr' },
            { code: 'de', dir: 'ltr' }
        ],
        language: 'en',
        storage: StorageStrategy.Cookie
    },
    translation: {
        providers: [
            { type: ProviderType.Static, prefix: './i18n/locale-' }
        ],
        caching: true,
        missingValue: 'No key'
    }
};

export function loadConfig(oidcConfigService: OidcConfigService) {
    console.log('APP_INITIALIZER STARTING');
    return () => oidcConfigService.load(`${window.location.origin}/api/ClientAppSettings`);
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        routing,