I have followed the tutorial of angular about i18n https://angular.io/guide/i18n , so i have created 2 files for ( messages.en.xlf and messages.fr.xlf ).
Whene i start my server like this ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr i see the right langue. i have created 2 buttons for my 2 languages and i want to use a specific messages.xlf according to the click of the user. how can i do that ?
you can configure angular i18n to get language from local storage, so you can add a function on click on languages buttons:
<button (click)='changeLang(lang)'></button> and set localstorage in your ts and reload:
changeLang(lang: string) { localStorage.setItem('Language', lang); location.reload(true); } create a local folder next to your app forlder and put your translation files there, like messages.en.xlf , messages.fr.xlf ...
and don't add this in your providers inside app.module.ts
export function getCurentLocale(): string { return localStorage.getItem('Language') || 'en'; } providers: [ ... { provide: LOCALE_ID, useValue: getCurentLocale() } ], here is what should i18n-providers.ts look like
import { LOCALE_ID, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core'; export function getTranslationProviders(): Promise<Object[]> { let locale = 'en'; if (localStorage.getItem('Language') !== undefined) { locale = localStorage.getItem('Language'); } // return no providers if fail to get translation file for locale const noProviders: Object[] = []; // No locale or U.S. English: no translation providers if (!locale || locale === 'en') { return Promise.resolve(noProviders); } let translationFile = `./locale/messages.${locale}.xlf`; if (locale === 'en') { translationFile = './messages.xlf'; } return loadTranslationFile(translationFile) .then( (translations: string ) => [ { provide: TRANSLATIONS, useValue: translations }, { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }, { provide: LOCALE_ID, useValue: locale } ]) .catch(() => noProviders); // ignore if file not found } function loadTranslationFile(file) { return new Promise(function (resolve, reject) { const xhr: XMLHttpRequest = new XMLHttpRequest(); xhr.open('GET', file, false); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200 || xhr.status === 0) { resolve(xhr.responseText); } else { reject({ status: xhr.status, statusText: xhr.statusText }); } } else { reject({ status: xhr.status, statusText: xhr.statusText }); } }; xhr.onerror = function () { reject({ status: xhr.status, statusText: xhr.statusText }); }; xhr.send(null); }); } 
