Angular i18n Dropdown

This guide demonstrates how to implement internationalization (i18n) with a language selection dropdown in Angular. Users can switch between multiple languages, and their selection will be persisted across sessions.

Creating the Language Dropdown

Use a dropdown button to allow users to select a language. The selected language will update dynamically using Angular’s service:

<div class="dropdown">
<button title="topbar-link" domixDropdownToggle [dropdownMenu]="dropdown2" type="button" class="topbar-link">
<img [src]="languageService.selectedLanguage?.flag" class="object-cover rounded-md size-6">
</button>

<div #dropdown2 class="!fixed p-2 dropdown-menu" dropdown-position="left">
<ngx-simplebar class="max-h-[calc(100vh_-_100px)]">
    <a *ngFor="let lang of languageService.languages" class="dropdown-item" (click)="setLanguage(lang.lang)">
        <img [src]="lang.flag" class="object-cover rounded-md size-5">
        <span>{{ lang.text }}</span>
    </a>
</ngx-simplebar>
</div>
</div>

Setting Up the Language Service

The service handles the logic for managing available languages, switching between them, and storing the user’s preference.

// src/app/services/language.service.ts
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

export interface LanguageData {
    text: string;
    flag: string;
    lang: string;
}

@Injectable({ providedIn: 'root' })
export class LanguageService {
    languages: LanguageData[] = [
        { text: 'English', flag: 'assets/images/flag/us.svg', lang: 'en' },
        { text: 'Spanish', flag: 'assets/images/flag/es.svg', lang: 'es' },
        { text: 'French', flag: 'assets/images/flag/fr.svg', lang: 'fr' },
        { text: 'German', flag: 'assets/images/flag/de.svg', lang: 'de' },
        // add more languages
    ];

    selectedLanguage: LanguageData | undefined = 
    this.languages.find(lang => lang.lang === this.getStoredSettings()) || this.languages[0];

    constructor(public translate: TranslateService) {
        ...
    }

    setLanguage(lang: string): void {
        ...
    }

    private getStoredSettings(): string {
        ...
    }

    private saveSettingsToLocalStorage(lang: string): void {
        ...
    }
}
            

Integrating the Service in a Component

Use the `LanguageService` in your component to switch languages dynamically.

// src/app/index.component.ts
import { Component } from '@angular/core';
import { LanguageService } from './services/language.service';

@Component({
    selector: 'app-index',
    templateUrl: './index.component.html',
})
export class IndexComponent {
    constructor(public languageService: LanguageService) {}

    setLanguage(lang: string): void {
        this.languageService.setLanguage(lang);
    }
}
            

Storing Language Preferences

The selected language is saved to `localStorage` to persist user preferences across sessions.