The LanguageSwitchService is an Angular service that manages multi-language support in the application. It provides methods to initialize, get, and set the current language, with automatic persistence to localStorage.
Overview
This service is provided at the root level and integrates with @ngx-translate/core to handle language switching across the application.
Source: src/app/core/language-switch/language-switch.service.ts
Static properties
availableLanguages
public static readonly availableLanguages: string[] = ['en', 'es'];
Array of available language codes. Default: ['en', 'es']
defaultLanguage
public static readonly defaultLanguage: string = LanguageSwitchService.availableLanguages[0];
The default language code (first item from availableLanguages). Default: 'en'
Methods
initLanguageFromLocalStorage()
public initLanguageFromLocalStorage(): void
- Reads the
language key from localStorage
- Validates that the stored language is in
availableLanguages
- Sets the language if valid
- Does nothing if no valid language is found (uses default)
getCurrentLanguage()
public getCurrentLanguage(): string
- Returns the current language from TranslateService if set and different from default
- Otherwise returns the default language
The current language code (e.g., ‘en’, ‘es’)
setLanguage()
public setLanguage(languageId: string): void
The language code to set (must be in availableLanguages)
- Validates that
languageId is in availableLanguages
- Updates the TranslateService with the new language
- Saves the language to localStorage under the
language key
- Does nothing if the language code is invalid
Usage example
import { Component, inject, OnInit } from '@angular/core';
import { LanguageSwitchService } from './core/language-switch/language-switch.service';
@Component({
selector: 'app-root',
template: `
<button (click)="switchLanguage('en')">English</button>
<button (click)="switchLanguage('es')">Español</button>
<p>Current language: {{ currentLanguage }}</p>
`
})
export class AppComponent implements OnInit {
languageService = inject(LanguageSwitchService);
currentLanguage = '';
ngOnInit() {
// Initialize language from localStorage on startup
this.languageService.initLanguageFromLocalStorage();
this.currentLanguage = this.languageService.getCurrentLanguage();
}
switchLanguage(lang: string) {
this.languageService.setLanguage(lang);
this.currentLanguage = this.languageService.getCurrentLanguage();
}
}
Available languages
To check which languages are supported:
import { LanguageSwitchService } from './core/language-switch/language-switch.service';
const languages = LanguageSwitchService.availableLanguages;
console.log('Supported languages:', languages); // ['en', 'es']
const defaultLang = LanguageSwitchService.defaultLanguage;
console.log('Default language:', defaultLang); // 'en'