Natuurlijk! Hier is een uitgebreide uitleg over het ontwikkelen van een meertalige Angular-component met Angular's i18n-framework voor een dashboard die statistieken en meldingen toont: **1. Vertalingen beheren** - **Gebruik XLIFF-bestanden:** Angular's i18n ondersteunt standaard XLIFF (.xlf of .xtf) bestanden voor vertalingen. Je maakt één hoofdtemplate met tekst, en Angular extracteert de te vertalen teksten naar deze bestanden. - **Structuur:** Plaats vertalingen per taal in aparte bestanden, bijvoorbeeld: ``` src/locale/messages.en.xlf src/locale/messages.nl.xlf ``` - **Vertalingen toevoegen:** In deze bestanden voeg je de vertalingen toe voor de tekstuele onderdelen van je dashboard. **2. Vertalingen voorbereiden en integreren** - **Extractie van vertalingen:** Gebruik Angular CLI om teksten te extraheren: ```bash ng extract-i18n --output-path src/locale ``` - **Vertaal de teksten:** Beheer de vertalingen in de gegenereerde XLIFF-bestanden en vertaal ze naar de gewenste talen. - **Build met vertalingen:** Tijdens het buildproces voeg je de vertalingen toe door de Angular build te configureren: ```bash ng build --localize ``` - **Gebruik van i18n attributen:** Mark teksten voor vertaling met de `i18n` attribuut: ```html <h1 i18n>Dashboard</h1> ``` **3. Dynamisch taal wisselen** - Angular's i18n-framework ondersteunt niet dynamisch wisselen tijdens runtime zonder herladen. Voor dynamische taalwissel kun je overwegen: - **Gebruik van een i18n bibliotheek zoals ngx-translate** (voor meer flexibiliteit). - **Alternatief:** Laad vertalingen dynamisch en pas de taal op basis van gebruikerskeuze. - **Met ngx-translate:** - Installeer: ```bash npm install @ngx-translate/core @ngx-translate/http-loader ``` - Configureer de vertalingen en maak een taalkeuzer component. - Verander taal door `translateService.use('nl')` aan te roepen. **4. Best practices voor schaalbaarheid** - **Gebruik een vertaalbibliotheek** zoals ngx-translate voor dynamisch wisselen en grote projecten. - **Centraliseer vertalingen:** Beheer alle vertalingen in gestructureerde JSON- of XLIFF-bestanden. - **Component-specificaties:** Mark alleen tekst die vertaald moet worden met i18n of vertaaltags. - **Lazy loading van vertalingen:** Laad vertalingen alleen wanneer nodig, bijvoorbeeld per module. - **Testen:** Controleer alle vertalingen en lay-out bij verschillende talen. **5. Implementatie voorbeeld in de component** - **Voor statische teksten (met Angular i18n):** ```html <h1 i18n>Statistieken</h1> <div i18n>Meldingen</div> ``` - **Voor dynamische vertalingen met ngx-translate:** ```typescript import { TranslateService } from '@ngx-translate/core'; constructor(private translate: TranslateService) { this.translate.addLangs(['en', 'nl']); this.translate.setDefaultLang('en'); const browserLang = this.translate.getBrowserLang(); this.translate.use(browserLang.match(/en|nl/) ? browserLang : 'en'); } changeLanguage(lang: string) { this.translate.use(lang); } ``` En in de template: ```html <button (click)="changeLanguage('en')">English</button> <button (click)="changeLanguage('nl')">Nederlands</button> <div>{{ 'STATISTICS' | translate }}</div> <div>{{ 'NOTIFICATIONS' | translate }}</div> ``` **Samenvatting:** - Gebruik Angular i18n voor statische vertalingen en eenvoudige apps. - Voor dynamisch wisselen en grotere schaalbaarheid: gebruik een vertaalbibliotheek zoals ngx-translate. - Beheer vertalingen gestructureerd en overzichtelijk. - Laad vertalingen lazy en test uitgebreid. - Voor een dashboard met statistieken en meldingen, mark de tekst met i18n of vertaal tags en beheer vertalingen centraal. Heeft u meer specifieke vragen of hulp bij het schrijven van code?

Hier is een complete handleiding voor het ontwikkelen van een meertalig Angular dashboard met i18n: ## 1. Projectopzet en basisconfiguratie ### Installatie en configuratie ```bash ng new multilang-dashboard cd multilang-dashboard ng add @angular/localize ``` ### angular.json configuratie ```json { "projects": { "multilang-dashboard": { "i18n": { "sourceLocale": "nl", "locales": { "en": "src/locales/messages.en.xlf", "fr": "src/locales/messages.fr.xlf" } } } } } ``` ## 2. Dashboard Component Structuur ### dashboard.component.ts ```typescript import { Component, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent implements OnInit { currentLanguage = 'nl'; statistics = { users: 1250, revenue: 50000, notifications: 23 }; constructor(private translate: TranslateService) { this.translate.setDefaultLang('nl'); this.translate.use('nl'); } switchLanguage(language: string): void { this.currentLanguage = language; this.translate.use(language); // Optioneel: taal opslaan in localStorage localStorage.setItem('userLanguage', language); } ngOnInit(): void { const savedLanguage = localStorage.getItem('userLanguage'); if (savedLanguage) { this.switchLanguage(savedLanguage); } } } ``` ## 3. Template met i18n attributen ### dashboard.component.html ```html <div class="dashboard-container"> <!-- Taalselectie --> <div class="language-selector"> <button (click)="switchLanguage('nl')" [class.active]="currentLanguage === 'nl'"> <span i18n="@@languageDutch">Nederlands</span> </button> <button (click)="switchLanguage('en')" [class.active]="currentLanguage === 'en'"> <span i18n="@@languageEnglish">English</span> </button> <button (click)="switchLanguage('fr')" [class.active]="currentLanguage === 'fr'"> <span i18n="@@languageFrench">Français</span> </button> </div> <!-- Dashboard inhoud --> <h1 i18n="@@dashboardTitle">Dashboard Overzicht</h1> <!-- Statistieken sectie --> <div class="stats-grid"> <div class="stat-card"> <h3 i18n="@@totalUsers">Totaal Gebruikers</h3> <p class="stat-number">{{ statistics.users }}</p> <span i18n="@@usersDescription">actieve gebruikers</span> </div> <div class="stat-card"> <h3 i18n="@@totalRevenue">Totale Omzet</h3> <p class="stat-number">€{{ statistics.revenue }}</p> <span i18n="@@revenueDescription">dit kwartaal</span> </div> <div class="stat-card"> <h3 i18n="@@notifications">Meldingen</h3> <p class="stat-number">{{ statistics.notifications }}</p> <span i18n="@@unreadNotifications">ongelezen meldingen</span> </div> </div> <!-- Meldingen lijst --> <div class="notifications-section"> <h2 i18n="@@recentNotifications">Recente Meldingen</h2> <div class="notification-item"> <span i18n="@@notification1">Nieuw gebruikersrapport is beschikbaar</span> </div> <div class="notification-item"> <span i18n="@@notification2">Systeemupdate gepland voor vannacht</span> </div> </div> </div> ``` ## 4. Vertalingen extraheren en beheren ### Vertalingen extraheren ```bash ng extract-i18n --output-path src/locales ``` ### messages.nl.xlf (bronbestand) ```xml <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="nl" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="dashboardTitle" datatype="html"> <source>Dashboard Overzicht</source> <target>Dashboard Overzicht</target> </trans-unit> <trans-unit id="totalUsers" datatype="html"> <source>Totaal Gebruikers</source> <target>Totaal Gebruikers</target> </trans-unit> </body> </file> </xliff> ``` ### messages.en.xlf (vertaald) ```xml <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="nl" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="dashboardTitle" datatype="html"> <source>Dashboard Overzicht</source> <target>Dashboard Overview</target> </trans-unit> <trans-unit id="totalUsers" datatype="html"> <source>Totaal Gebruikers</source> <target>Total Users</target> </trans-unit> </body> </file> </xliff> ``` ## 5. Dynamische content vertaling ### translation.service.ts ```typescript import { Injectable } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @Injectable({ providedIn: 'root' }) export class TranslationService { constructor(private translate: TranslateService) {} getTranslatedNotification(type: string, data: any): Promise<string> { const key = `NOTIFICATION_${type.toUpperCase()}`; return this.translate.get(key, data).toPromise(); } // Voor dynamische statistieken labels getStatisticLabel(statKey: string): Promise<string> { return this.translate.get(`STAT_${statKey}`).toPromise(); } } ``` ## 6. Build configuratie voor meerdere talen ### package.json scripts ```json { "scripts": { "build:i18n": "npm run build:nl && npm run build:en && npm run build:fr", "build:nl": "ng build --configuration=nl", "build:en": "ng build --configuration=production --i18n-file=src/locales/messages.en.xlf --i18n-format=xlf --i18n-locale=en", "build:fr": "ng build --configuration=production --i18n-file=src/locales/messages.fr.xlf --i18n-format=xlf --i18n-locale=fr" } } ``` ## 7. Best Practices voor Schaalbaarheid ### A. Modulaire vertalingen ```typescript // feature-specific translation modules export const DASHBOARD_TRANSLATIONS = { NL: { DASHBOARD_TITLE: 'Dashboard Overzicht', TOTAL_USERS: 'Totaal Gebruikers' }, EN: { DASHBOARD_TITLE: 'Dashboard Overview', TOTAL_USERS: 'Total Users' } }; ``` ### B. Consistent ID-beheer ```html <!-- Gebruik beschrijvende IDs --> <h1 i18n="@@dashboard.page.title">Dashboard</h1> <span i18n="@@dashboard.stats.users.label">Gebruikers</span> <!-- Voor pluralisatie --> <span i18n="@@notification.count"> {count, plural, =0 {geen meldingen} =1 {1 melding} other {{{count}} meldingen}} </span> ``` ### C. Runtime taalwisseling ```typescript // app.module.ts import { HttpClient, HttpClientModule } from '@angular/common/http'; import { TranslateLoader, TranslateModule } 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: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ] }) ``` ## 8. Geavanceerde features ### A. Parameters in vertalingen ```html <span i18n="@@welcomeMessage"> Welkom, {{userName}}! Je hebt {{notificationCount}} nieuwe meldingen. </span> ``` ### B. Datum/valuta formattering ```typescript formatLocalizedDate(date: Date): string { return new Intl.DateTimeFormat(this.currentLanguage, { year: 'numeric', month: 'long', day: 'numeric' }).format(date); } ``` ## 9. Testing strategie ### dashboard.component.spec.ts ```typescript import { TestBed } from '@angular/core/testing'; import { TranslateModule, TranslateService } from '@ngx-translate/core'; describe('DashboardComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], declarations: [DashboardComponent] }).compileComponents(); }); it('should display content in correct language', () => { const fixture = TestBed.createComponent(DashboardComponent); const component = fixture.componentInstance; const translate = TestBed.inject(TranslateService); translate.use('nl'); fixture.detectChanges(); const title = fixture.nativeElement.querySelector('h1'); expect(title.textContent).toContain('Dashboard Overzicht'); }); }); ``` ## 10. Deployment strategie ### A. Taalspecifieke builds ```bash # Aparte builds voor elke taal ng build --configuration=production --i18n-locale=nl --i18n-file=src/locales/messages.nl.xlf ``` ### B. Server-side routing ```typescript // Express.js voorbeeld app.get('/:lang/*', (req, res) => { const lang = req.params.lang; if (['nl', 'en', 'fr'].includes(lang)) { res.sendFile(path.join(__dirname, `${lang}/index.html`)); } }); ``` Deze implementatie biedt een robuuste basis voor een schaalbare meertalige Angular applicatie met optimale performance en onderhoudbaarheid.