Fuse uses ngx-translate module and supports multiple languages and translations.

Since not everybody need multi-language setup for their apps, we decided NOT to put translations everywhere. If you want to see the translations in action, visit Mail app and then change the language from the Toolbar.

Mail app is the only app that has translations for demonstration purposes. You can look at its source code to see the usage.

Usage

In order to use the translations, create your translation file within the module you want to use the translations. For example, for the Mail app, create i18n/en.ts file inside the apps/mail folder.

The structure of the translation file is important and it must define the language id along with the translation data:

// i18n/en.ts export const locale = { lang: 'en', data: { 'MAIL': { 'COMPOSE': 'COMPOSE' } } }; // i18n/tr.ts export const locale = { lang: 'tr', data: { 'MAIL': { 'COMPOSE': 'YENİ E-POSTA' } } };

After you create your translation files, open the *.component.ts file for the module you want to have translations, and register your translation file. For this example, we will use the mail.component.ts file:

// Your imports import { ... } from '..'; // Import the locale files import { locale as english } from './i18n/en'; import { locale as turkish } from './i18n/tr'; @Component({ selector : 'fuse-mail', templateUrl: './mail.component.html', styleUrls : ['./mail.component.scss'] }) export class FuseMailComponent { constructor(private translationLoader: FuseTranslationLoaderService) { this.translationLoader.loadTranslations(english, turkish); } ... }

Changing the language

Changing the current language can happen instantly. Simply call the use method from the translate service:

import { TranslateService } from '@ngx-translate/core'; constructor(private translate: TranslateService) {} setLanguage() { // Use the selected language for translations this.translate.use('tr'); }

More detailed usage of the translation service can be found in the toolbar.component.ts file.