is runtime language translation possible with angular (@angular/localize)?

Question

I am trying to learn and add angular internationalization in a project. I can understand only compile time translation from angular documents (https://angular.io/guide/i18n-overview).

I need some thing like this https://stackblitz.com/github/ngx-translate/example which is third party library 'ngx-translate'.

Can't we achieve the same runtime translation just with angular library without any third party library ?

Please guide me if runtime translation is possible with angular library.

Answer 1

You may have seen that build time translation was always the case with Angular, where you'd build the app per locale (e.g. one "en" build and one "fr" build). You'd then host each app, and have to redirect to the specific locale to be able to switch it at runtime. Not the best experience.

With Angular Ivy, there's also now an @angular/localize package which provides a $localize tagged template helper which can be used for runtime translation, but it will still use the locale you're currently on. When built in production configuration, I believe it may optimize out the other locales, and so you still can't just switch the language at runtime.

const message = $localize`:@@username:Hello {username}`;

For switching the translations at runtime, you could probably track the below issue and vote for it:

https://github.com/angular/angular/issues/38953

Especially, you can see the two comments from napei and petebacondarwin, which seems to suggest this will not be supported natively in Angular.

dynamic locale switching (of course)
Indeed this will not be supported natively in Angular.

Maybe if they get more votes they'll realise the demand for this feature :) Until then, you'll need to use 3rd party libraries like ngx-translate that has already been suggested.