export const l10nConfig: L10nConfig = {
    format: 'language-region',
    providers: [
        { name: 'app', asset: i18nAsset }
    ],
    cache: true,
    keySeparator: '.',
    defaultLocale: { language: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' },
    schema: [
        { locale: { language: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles', units: { 'length': 'mile' } }, dir: 'ltr', text: 'United States' },
        { locale: { language: 'it-IT', currency: 'EUR', timeZone: 'Europe/Rome', units: { 'length': 'kilometer' } }, dir: 'ltr', text: 'Italia' }
    ],
};

const i18nAsset = {
    'en-US': {
        greeting: 'Hello world!',
        whoIAm: 'I am {{name}}',
        devs: {
            one: 'One software developer',
            other: '{{value}} software developers'
        }
    },
    'it-IT': {
        greeting: 'Ciao mondo!',
        whoIAm: 'Sono {{name}}',
        devs: {
            one: 'Uno sviluppatore software',
            other: "{{ value }} sviluppatori software"
        }
    }
};

@NgModule({
    ...
    imports: [
        ...
        L10nTranslationModule.forRoot(l10nConfig),
        L10nIntlModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

export class PipeComponent {

    constructor(@Inject(L10N_LOCALE) public locale: L10nLocale) { }

}

export class PipeComponent {

    locale = inject(L10N_LOCALE);

}

export const convertCurrency = (value: number, locale: L10nLocale, rate: number) => {
    switch (locale.currency) {
        case "USD":
            return value * rate;
        default:
            return value;
    }
};

export class ApiComponent implements OnInit {

    constructor(private translation: L10nTranslationService, private intl: L10nIntlService) { }

    ngOnInit() {
        this.translation.onChange().subscribe({
            next: (locale: L10nLocale) => {
                // Texts
                this.greeting = this.translation.translate('greeting');
                this.whoIAm = this.translation.translate('whoIAm', { name: 'Angular l10n' });
                // Dates
                this.formattedToday = this.intl.formatDate(this.today, { dateStyle: 'full', timeStyle: 'short' });
                this.formattedTimeAgo = this.intl.formatRelativeTime(-4, 'second', { numeric: 'always', style: 'long' });
                // Numbers
                this.formattedValue = this.intl.formatNumber(
                    1000,
                    { digits: '1.2-2', style: 'currency' },
                    undefined,
                    undefined,
                    convertCurrency,
                    { rate: 1.16 }
                );
                this.formattedLength = this.intl.formatNumber(
                    1,
                    { digits: '1.0-2', style: 'unit', unit: locale.units['length'] },
                    undefined,
                    undefined,
                    convertLength
                );
                this.formattedOnePlural = this.intl.plural(1, 'devs', { type: 'cardinal' });
                this.formattedOtherPlural = this.intl.plural(2, 'devs', { type: 'cardinal' });
            }
        });
    }

}

export class AppComponent {

    schema = this.l10nConfig.schema;

    constructor(@Inject(L10N_CONFIG) private l10nConfig: L10nConfig, private translation: L10nTranslationService) { }

    setLocale(locale: L10nLocale): void {
        this.translation.setLocale(locale);
    }

}

@Injectable() export class HttpTranslationLoader implements L10nTranslationLoader {

    private headers = new HttpHeaders({ 'Content-Type': 'application/json' });

    constructor(@Optional() private http: HttpClient) { }

    public get(language: string, provider: L10nProvider): Observable<{ [key: string]: any }> {
        const url = `${provider.asset}-${language}.json`;
        const options = {
            headers: this.headers,
            params: new HttpParams().set('v', provider.options.version)
        };
        return this.http.get(url, options);
    }

}

export const l10nConfig: L10nConfig = {
    ...
    providers: [
        { name: 'app', asset: './assets/i18n/app', options: { version: '1.0.0' } },
    ],
    ...
};

@NgModule({
    ...
    imports: [
        ...
        L10nTranslationModule.forRoot(
            l10nConfig,
            {
                translationLoader: HttpTranslationLoader
            }
        )
    ],
    ...
})
export class AppModule { }

export const l10nConfig: L10nConfig = {
    ...
    fallback: true,
    ...
};

@Injectable() export class AppLoader implements L10nLoader {
    constructor(private translation: L10nTranslationService) { }

    public async init(): Promise<void> {
        await ... // Some custom data loading action
        await this.translation.init();
    }