Multi Language

Alpha Fusion uses @ngx-translate/core library to enable multi-language support in the project.

📖 Official Documentation

For detailed setup and usage, visit the official ngx-translate documentation:

ngx-translate/core GitHub

Alpha Fusion doesn't modify ngx-translate's functionality. Follow the official docs to get started.

⚙️ Initial Setup

Translations are stored in JSON files under assets/i18n/. The setup is defined in app.config.ts:

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient): any {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

importProvidersFrom([
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient],
    },
  }),
])

🧭 Translating Navigation

Alpha Fusion navigation supports runtime updates. You can replace navigation labels dynamically when the language changes:

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {}

changeLanguage(lang: string) {
  this.translate.use(lang);
  // Optionally, update navigation items here
}

Use this function from a language switcher component.

🌍 Adding New Languages

1. Register locale in app.config.ts:

import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

2. Create JSON translation files:

assets/i18n/en.json
assets/i18n/de.json
assets/i18n/ru.json
assets/i18n/fr.json

3. Example translation content:

{
  "DASHBOARDS": "Dashboards",
  "PROJECT": "Project",
  "ANALYTICS": "Analytics"
}

🗑️ Removing Multi-Language Support

If multi-language support is not needed:

• Remove TranslateModule from app.config.ts.

• Delete assets/i18n/.

• Remove @ngx-translate/core and @ngx-translate/http-loader from package.json and run:

npm install

💡 Notes

Current locale is retrieved from SettingsService.currentLocale via Angular’s LOCALE_ID.

Switch languages at runtime:

this.translate.use(lang);

✅ Now your Alpha Fusion project can support multiple languages with a clean and maintainable setup.