Angular Translation Files Tutorial 🌐🔄

Welcome back to CodeYourCraft! Today, we're going to delve into a fascinating aspect of Angular - Translation Files. This lesson is designed for both beginners and intermediate learners, so let's get started! 🎯

What are Translation Files? 📝

Translation Files, also known as i18n files (i18n stands for internationalization), are used to localize the content of an Angular application. This means translating the application's text into different languages.

Why do we need Translation Files? 💡

Translation Files are crucial for making your applications accessible to a global audience. By providing translations, you can reach more users and create a better user experience.

Setting up Translation Files 📝

Angular provides Angular Language Service for managing translations. To start, we need to install it:

bash

ng add @ngx-translate/core
ng add @ngx-translate/http-loader

Creating Translation Files 📝

Translation files are usually in .json format. Let's create a translation file for our application in the src/assets/i18n directory:

json

// src/assets/i18n/en.json
{
  "Welcome": "Welcome",
  "Home": "Home",
  "About": "About"
}

Using Translation Files 💡

To use the translation file, we need to inject TranslateService and use its methods:

typescript

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'Welcome' | translate }}</h1>
    <nav>
      <a routerLink="home">Home</a>
      <a routerLink="about">About</a>
    </nav>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang('en');
  }
}

Loading Multiple Languages 📝

To load multiple languages, we need to update our app.module.ts:

typescript

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { registerLocaleData } from '@angular/common';
import localeEn from '@angular/common/locales/en';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeEn);
registerLocaleData(localeFr);

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: TranslateHttpLoader
      }
    })
  ],
  providers: [
    TranslateService,
    { provide: LOCALE_ID, useValue: 'en' },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Changing Language 💡

To change the language, we can use the changeLanguage method of TranslateService:

typescript

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

@Component({
  selector: 'app-header',
  template: `
    <button (click)="changeLanguage('fr')">Français</button>
  `
})
export class HeaderComponent {
  constructor(private translate: TranslateService) { }

  changeLanguage(language: string) {
    this.translate.use(language);
  }
}

That's all for today! In the next lesson, we'll dive deeper into Angular's translation capabilities. Until then, keep coding and learning! 💻💪