Natuurlijk! Hier is een stapsgewijze gids om internationalisatie (i18n) in je Angular-toepassing op te zetten, inclusief beheer van taalbestanden, dynamisch wisselen van talen en lokalisatie van componenten en sjablonen voor Engels en Spaans. ### 1. Angular i18n configureren Angular biedt ingebouwde ondersteuning voor i18n, maar voor dynamisch taalwisselen en meer flexibiliteit is het aan te raden om een externe bibliotheek te gebruiken, zoals `ngx-translate`. --- ### 2. Installatie van ngx-translate Voer de volgende commando's uit in je terminal: ```bash npm install @ngx-translate/core @ngx-translate/http-loader ``` --- ### 3. Taalbestanden maken Maak een map voor je taalbestanden, bijvoorbeeld `src/assets/i18n/`. Voor Engels (`en.json`) en Spaans (`es.json`) maak je JSON-bestanden: **en.json** ```json { "TITLE": "Welcome", "HELLO": "Hello, {{name}}!" } ``` **es.json** ```json { "TITLE": "Bienvenido", "HELLO": "¡Hola, {{name}}!" } ``` --- ### 4. Module configureren In je `app.module.ts`, importeer en configureer `TranslateModule`: ```typescript import { HttpClientModule, HttpClient } from '@angular/common/http'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); } @NgModule({ imports: [ HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ], // andere imports, declarations, etc. }) export class AppModule { } ``` --- ### 5. Taal wisselen in component In je component (`app.component.ts`): ```typescript import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { constructor(private translate: TranslateService) { // Stel standaard taal in this.translate.setDefaultLang('en'); // Optioneel: taal automatisch detecteren const browserLang = this.translate.getBrowserLang(); this.changeLanguage(browserLang.match(/en|es/) ? browserLang : 'en'); } changeLanguage(lang: string) { this.translate.use(lang); } } ``` In je HTML (`app.component.html`): ```html <div> <button (click)="changeLanguage('en')">Engels</button> <button (click)="changeLanguage('es')">Spaans</button> </div> <h1>{{ 'TITLE' | translate }}</h1> <p>{{ 'HELLO' | translate:{ name: 'John' } }}</p> ``` --- ### 6. Lokalisatie van componenten en sjablonen Gebruik de `translate` pipe in je sjablonen om tekst te vertalen. Voor dynamische inhoud met parameters: ```html {{ 'HELLO' | translate:{ name: userName } }} ``` Voor datums, valuta en andere locale-afhankelijke formats kun je Angular’s ingebouwde pipes gebruiken en de locale instellen: ```typescript import { registerLocaleData } from '@angular/common'; import localeEn from '@angular/common/locales/en'; import localeEs from '@angular/common/locales/es'; @Component({ /* ... */ }) export class AppComponent { constructor(private translate: TranslateService) { // Locale instellen op basis van geselecteerde taal // Voor voorbeeld: if (this.translate.currentLang === 'es') { registerLocaleData(localeEs); } else { registerLocaleData(localeEn); } } } ``` --- ### 7. Samenvatting - Maak taalbestanden in JSON-formaat in `assets/i18n/`. - Gebruik `ngx-translate` voor dynamisch wisselen van talen. - Implementatie van knoppen of dropdowns om talen te selecteren. - Gebruik de `translate` pipe in sjablonen voor vertalingen. - Voor correcte datum- en getalweergave, registreer en stel de juiste locale in op basis van de taal. --- Wil je dat ik een voorbeeldproject voor je opzet of verdere details geef?

Ik zal je stap voor stap begeleiden bij het opzetten van internationalisatie (i18n) in je Angular applicatie voor Engels en Spaans. ## 1. Installatie en basisconfiguratie ```bash # Installeer Angular i18n tools ng add @angular/localize ``` ## 2. Configureer angular.json ```json { "projects": { "your-app": { "i18n": { "sourceLocale": "en", "locales": { "es": "src/locales/messages.es.xlf" } }, "architect": { "build": { "configurations": { "es": { "localize": ["es"], "outputPath": "dist/your-app-es/" } } }, "serve": { "configurations": { "es": { "browserTarget": "your-app:build:es" } } } } } } } ``` ## 3. Extract vertaalstrings ```bash # Extraheer vertaalstrings naar XLF bestanden ng extract-i18n --output-path src/locales/ # Hernoem het gegenereerde bestand voor Engels mv src/locales/messages.xlf src/locales/messages.en.xlf ``` ## 4. Maak taalbestanden **messages.en.xlf:** ```xml <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="en" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="welcome" datatype="html"> <source>Welcome</source> <target>Welcome</target> </trans-unit> <trans-unit id="description" datatype="html"> <source>This is my application</source> <target>This is my application</target> </trans-unit> </body> </file> </xliff> ``` **messages.es.xlf:** ```xml <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="en" target-language="es" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="welcome" datatype="html"> <source>Welcome</source> <target>Bienvenido</target> </trans-unit> <trans-unit id="description" datatype="html"> <source>This is my application</source> <target>Esta es mi aplicación</target> </trans-unit> </body> </file> </xliff> ``` ## 5. Gebruik i18n in templates ```html <!-- component-template.html --> <div> <h1 i18n="@@welcome">Welcome</h1> <p i18n="@@description">This is my application</p> <!-- Met parameters --> <span i18n="@@greeting">Hello, {username}!</span> <!-- Meervoud --> <span i18n="@@itemsCount"> {count, plural, =0 {No items} =1 {One item} other {{{count}} items}} </span> </div> ``` ## 6. Dynamische taalwisseling **app.module.ts:** ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); } @NgModule({ imports: [ BrowserModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ] }) export class AppModule { } ``` **language.service.ts:** ```typescript import { Injectable } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @Injectable({ providedIn: 'root' }) export class LanguageService { constructor(private translate: TranslateService) { this.translate.setDefaultLang('en'); this.translate.use('en'); } switchLanguage(language: string) { this.translate.use(language); localStorage.setItem('preferredLanguage', language); } getCurrentLanguage(): string { return this.translate.currentLang; } } ``` ## 7. Taalkiezer component **language-switcher.component.ts:** ```typescript import { Component } from '@angular/core'; import { LanguageService } from './language.service'; @Component({ selector: 'app-language-switcher', template: ` <select (change)="switchLanguage($event.target.value)" [value]="currentLanguage"> <option value="en">English</option> <option value="es">Español</option> </select> ` }) export class LanguageSwitcherComponent { currentLanguage: string; constructor(private languageService: LanguageService) { this.currentLanguage = this.languageService.getCurrentLanguage(); } switchLanguage(lang: string) { this.languageService.switchLanguage(lang); this.currentLanguage = lang; } } ``` ## 8. Gebruik in componenten **example.component.ts:** ```typescript import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-example', template: ` <h1>{{ 'WELCOME_TITLE' | translate }}</h1> <p>{{ 'DESCRIPTION' | translate }}</p> <p>{{ dynamicText | translate }}</p> ` }) export class ExampleComponent { dynamicText = 'USER_GREETING'; constructor(private translate: TranslateService) {} updateText() { this.translate.get('SPECIAL_MESSAGE').subscribe((translation: string) => { console.log(translation); }); } } ``` ## 9. JSON vertaalbestanden (alternatief) **assets/i18n/en.json:** ```json { "WELCOME_TITLE": "Welcome to our application", "DESCRIPTION": "This is a sample application with internationalization", "USER_GREETING": "Hello, {{username}}!", "BUTTONS": { "SAVE": "Save", "CANCEL": "Cancel" } } ``` **assets/i18n/es.json:** ```json { "WELCOME_TITLE": "Bienvenido a nuestra aplicación", "DESCRIPTION": "Esta es una aplicación de ejemplo con internacionalización", "USER_GREETING": "¡Hola, {{username}}!", "BUTTONS": { "SAVE": "Guardar", "CANCEL": "Cancelar" } } ``` ## 10. Build commando's ```bash # Build voor Engels ng build --configuration=production # Build voor Spaans ng build --configuration=es # Of build alle talen ng build --localize ``` ## 11. Datum en valuta lokalisatie ```typescript import { DatePipe, CurrencyPipe } from '@angular/common'; import { LOCALE_ID } from '@angular/core'; @Component({ providers: [ { provide: LOCALE_ID, useValue: 'es' } ] }) export class MyComponent { today = new Date(); price = 1234.56; } ``` ```html <!-- In template --> <p>{{ today | date:'fullDate' }}</p> <p>{{ price | currency:'EUR':'symbol' }}</p> ``` ## Belangrijke tips: 1. **Id's**: Gebruik betekenisvolle id's voor vertaaleenheden 2. **Context**: Voeg context toe met het `i18n-` attribuut 3. **Pluralisatie**: Gebruik meervoudsvormen correct 4. **Parameters**: Markeer plaatshouders duidelijk 5. **Test**: Test altijd beide talen grondig Deze setup geeft je een complete i18n-implementatie voor Engels en Spaans met dynamische taalwisseling en correcte lokalisatie van alle componenten.