Skip to main content
This guide explains how to work with translations in the Angular 18 Archetype using ngx-translate.

​
Translation system overview

The project uses @ngx-translate/core and @ngx-translate/http-loader to manage translations. Translation files are stored in JSON format at src/assets/i18n/. Configuration is handled in:
  • src/app/config/httpLoaderFactory.ts:8 - HTTP loader factory
  • src/app/config/httpLoaderFactory.ts:28 - Language initialization
  • src/app/core/language-switch/language-switch.service.ts - Language switching logic

​
Adding a new language

1

Create the translation file

Create a new JSON file in src/assets/i18n/ with the language code as the filename:
touch src/assets/i18n/fr.json
Add your translations in JSON format:
src/assets/i18n/fr.json
{
  "greeting": "Bonjour le monde! :)"
}
2

Register the language

Open src/app/core/language-switch/language-switch.service.ts and add the new language to the availableLanguages array:
src/app/core/language-switch/language-switch.service.ts
export class LanguageSwitchService {
  public static readonly availableLanguages: string[] = ['en', 'es', 'fr'];
  // ...
}
The first language in the array is used as the default language.
3

Add language switching UI (optional)

Update your language switcher component to include the new language:
@Component({
  standalone: true,
  selector: 'app-navbar',
  template: `
    <button (click)="changeLang('en')">English</button>
    <button (click)="changeLang('es')">Spanish</button>
    <button (click)="changeLang('fr')">French</button>
  `
})
export class NavbarComponent {
  private languageSwitchService = inject(LanguageSwitchService);

  changeLang(lang: string) {
    this.languageSwitchService.setLanguage(lang);
  }
}

​
Adding new translation keys

1

Add keys to all language files

Add the same key to each language file with the appropriate translation:
{
  "greeting": "Hello World! :)",
  "welcome": "Welcome to our application",
  "user": {
    "profile": "User Profile",
    "settings": "Settings"
  }
}
Make sure to add the same keys to all language files to avoid missing translations.
2

Use the translation keys

You can now use these keys in your components (see below).

​
Using translations in components

​
In templates

Import TranslateModule and use the translate pipe: 
import { Component } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [TranslateModule],
  template: `
    <h1>{{ 'greeting' | translate }}</h1>
    <p>{{ 'welcome' | translate }}</p>
    <p>{{ 'user.profile' | translate }}</p>
  `
})
export class ExampleComponent {}

​
In component code

Inject TranslateService to use translations programmatically: 
import { Component, inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-example',
  standalone: true,
  template: `<h1>{{ title }}</h1>`
})
export class ExampleComponent {
  private translate = inject(TranslateService);
  title = '';

  ngOnInit() {
    this.title = this.translate.instant('greeting');
    
    // Or subscribe to get updates when language changes
    this.translate.get('welcome').subscribe((text: string) => {
      console.log(text);
    });
  }
}

​
Switching languages

The LanguageSwitchService provides methods to manage the current language: 
import { inject } from '@angular/core';
import { LanguageSwitchService } from '@core/language-switch/language-switch.service';

export class SomeComponent {
  private languageService = inject(LanguageSwitchService);

  changeToSpanish() {
    this.languageService.setLanguage('es');
  }

  getCurrentLang() {
    return this.languageService.getCurrentLanguage();
  }
}
The selected language is automatically persisted to localStorage and restored on app initialization.

​
Translation file structure

​
Flat structure

{
  "home": "Home",
  "about": "About",
  "contact": "Contact"
}

{
  "navigation": {
    "home": "Home",
    "about": "About",
    "contact": "Contact"
  },
  "auth": {
    "login": "Log In",
    "logout": "Log Out",
    "register": "Register"
  }
}
Access nested keys using dot notation: {{ 'navigation.home' | translate }}

Build docs developers (and LLMs) love

Get started for freeTalk to us