Angular: How to get the current locale at runtime when using AOT

Question

I am compiling my project with:

ng serve --aot --i18nFile=client/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr

How can I access the locale ID at runtime? I want to show/hide elements based on the locale.

PS. I do realise that using JIT compilation I can simply do this:

providers: [ { provide: LOCALE_ID, useValue: 'fr' } ]

But I'm looking for a AOT solution. I also would rather not infer locale based on hostname or anything like that.

Solution 1

Simply inject LOCALE_ID in your constructor, e.g.

import { LOCALE_ID, Inject } from '@angular/core';

...

constructor(
  @Inject(LOCALE_ID) public locale: string
) { }

Solution 2

The injection token LOCALE_ID does not provide your user's language or locale, it is static and defaults to 'en-US' unless you provide a different value for it (docs):

providers: [{provide: LOCALE_ID, useValue: 'en-GB' }]

Here's a method that gets the user's preferred language and locale:

  getUsersLocale(defaultValue: string): string {
    if (typeof window === 'undefined' || typeof window.navigator === 'undefined') {
      return defaultValue;
    }
    const wn = window.navigator as any;
    let lang = wn.languages ? wn.languages[0] : defaultValue;
    lang = lang || wn.language || wn.browserLanguage || wn.userLanguage;
    return lang;
  }

Comments

[inorganik]

Can you please clarify the question as to whether you want the user's locale, or if you just want to access the static LOCAL_ID value?

[Javier Larios]

import { Component, Inject, LOCALE_ID } from '@angular/core';

[Mir-Ismaili]

The better is to say: "Simply do this in your constructor".

[Jan]

I think you should mention more clearly, that your function returns either the users locale or the language, not always the language alone (f.e. 'en-US' OR 'en'). To get the language, we need to parse it from the locale. A not so experienced user could misunderstand this.

[inorganik]

You might consider deleting this answer because LOCALE_ID doesn't get the user's locale or language, it is static

[inorganik]

@Jan it returns both. As stated "Here's a method that gets the user's preferred language/locale"

[Scopperloit]

@inorganik A forward slash in formal or informal language usually indicates the word 'or', so your statement is most likely to be interpreted as "Here's a method that gets the user's preferred language OR locale". Jan is correct to suggest that you should clarify your statement. Ref: grammarly.com/blog/slash

[unitario]

This does not answer the question. The question is how you get the initialized app LOCALE_ID not the browser's default language.

[inorganik]

@unitario But the OP's question implies they want the user's locale - "I also would rather not infer locale based on hostname or anything like that."

[unitario]

@inorganik it implies that he/she doesn’t want the locale from the hostname or browser (“anything like that”). The app is being served with a specific locale (LOCALE_ID) which he/she want to access at runtime. Your solution will not provide that.

[Tamius Han]

@inorganik You might consider deleting your comment (and answer), because LOCALE_ID provides exactly what the OP asks and yours doesn't. window.navigator language will provide incorrect answer when user if the user switches the language of the angular application without also switching their browser locale. Your solution will also provide incorrect result for users who use locale unsupported by the app, who would otherwise prefer to use a different locale than the one you as developer consider the default (e.g. user's language nl is not supported by app, user wants de, app default is en)