Angular

Wie benutzt man Magic Translate in Angular-Apps. Der Angular-Client benötigt Angular 20 oder neuer und funktioniert mit und ohne zone.js.

Installation

Installiere den Angular-Client für Magic Translate in deiner App.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Füge dann provideMagicTranslate zu deiner Anwendungskonfiguration hinzu.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideMagicTranslate, Language } from '@magic-translate/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMagicTranslate({
      apiKey: '<your-api-key>',
      language: Language.DE // any supported language
    })
  ]
};

Falls du noch keinen API-Schlüssel hast, melde dich für Magic Translate an, um einen zu erhalten.

Jetzt kannst du die Komponente <t> in jeder Komponente verwenden, die sie importiert.

import { Component } from '@angular/core';
import { T } from '@magic-translate/angular';

@Component({
  selector: 'app-welcome',
  imports: [T],
  template: `<h1><t>Please translate me!</t></h1>`
})
export class Welcome {}

Das ist es. Deine App kann jetzt in über 70 Sprachen übersetzt werden.

Konfiguration

provideMagicTranslate akzeptiert diese Optionen:

Option	Beschreibung
`apiKey`	Erforderlich. Dein Magic Translate API-Schlüssel.
`language`	Erforderlich. Die Sprache, in die dein Inhalt übersetzt wurde, zum Beispiel `'de'`.
`sourceLanguage`	Die Sprache, in der deine Vorlagen geschrieben sind. Es wird automatisch erkannt, also stelle es nur ein, wenn die Erkennung falsche Ergebnisse liefert.
`formality`	`'formal'` oder `'informal'`. Nicht für alle Sprachen unterstützt. Du kannst es für jede Übersetzung überschreiben.
`debug`	Protokolliert die Anfragen auf der Konsole.

Sprachen ändern

Injiziere den Dienst MagicTranslate, um die aktuelle Sprache zu lesen oder zu ändern. Jede <t>-Komponente und t pipe werden automatisch aktualisiert.

import { Component, inject } from '@angular/core';
import { MagicTranslate } from '@magic-translate/angular';

@Component({
  selector: 'app-language-switcher',
  template: `
    <div>Current language is: {{ magicTranslate.language() }}</div>
    <button (click)="magicTranslate.setLanguage('de')">German</button>
  `
})
export class LanguageSwitcher {
  protected readonly magicTranslate = inject(MagicTranslate);
}

language ist ein Signal, also kannst du es auch in computed und effect verwenden.

Serverseitiges Rendern

Die <t>-Komponente und t pipe werden im Browser übersetzt. Beim serverseitigen Rendern rendert der Server den Originalinhalt und er wird nach der Flüssigkeitszufuhr übersetzt. Um stattdessen vollständig übersetztes HTML zu senden, übersetze die Seite, während sie gerendert wird, wie in Prerendering gezeigt.

Beispielprojekt

Du kannst ein Beispielprojekt auf GitHub finden und es live sehen.