Language Switcher Tool
Test internationalization without reloading
Overview
The Language Switcher tool allows developers to quickly switch between different languages during development and testing. This enables testing translations and internationalization (i18n) without manually changing browser settings or application configuration.
Use Cases
Testing Translations
Quickly verify translations across different languages without reloading the application.
Layout Verification
Check UI layout with different text lengths (e.g., German vs. English).
RTL Support Testing
Test right-to-left language support (Arabic, Hebrew) with a single click.
Demo Scenarios
Demonstrate multi-language support during client presentations.
Quick Start
app.component.ts
Basic setup for Language Tool - define languages and handle changes
import { Component, inject, OnInit } from '@angular/core';
import { DevToolbarLanguageService } from 'ngx-dev-toolbar';
@Component({
selector: 'app-root',
template: '<p>{{ "HELLO" | translate }}</p>'
})
export class AppComponent implements OnInit {
private languageService = inject(DevToolbarLanguageService);
ngOnInit() {
// Define available languages
this.languageService.setAvailableOptions([
{ id: 'en', name: 'English' },
{ id: 'es', name: 'Español' },
{ id: 'fr', name: 'Français' }
]);
// Subscribe to language changes from toolbar
this.languageService.getForcedValues().subscribe(languages => {
const selected = languages[0];
if (selected) {
// Update your i18n service
console.log('Language changed to:', selected.name);
}
});
}
}API Reference
DevToolbarLanguageService
Methods
Interfaces
Advanced Usage
i18n-integration.service.ts
Advanced integration with Transloco i18n library
import { Injectable, inject } from '@angular/core';
import { DevToolbarLanguageService } from 'ngx-dev-toolbar';
import { TranslocoService } from '@ngneat/transloco';
@Injectable({ providedIn: 'root' })
export class I18nIntegrationService {
private toolbarService = inject(DevToolbarLanguageService);
private transloco = inject(TranslocoService);
initialize(supportedLanguages: { id: string; name: string }[]) {
// Configure toolbar with available languages
this.toolbarService.setAvailableOptions(supportedLanguages);
// Subscribe to toolbar language changes
this.toolbarService.getForcedValues().subscribe(languages => {
if (languages.length > 0) {
const newLang = languages[0].id;
this.transloco.setActiveLang(newLang);
}
});
}
}