Angular

Comment utiliser Magic Translate dans les apps Angular. Le client Angular nécessite Angular 20 ou une version plus récente et fonctionne avec et sans zone.js.

Installation

Installe le client Angular pour Magic Translate dans ton application.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Puis ajoute provideMagicTranslate à la configuration de ton application.

// 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
    })
  ]
};

Si tu n'as pas encore de clé API, inscris-toi à Magic Translate pour en obtenir une.

Tu peux désormais utiliser le composant <t> dans n'importe quel composant qui l'importe.

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 {}

C'est ça. Ton application peut désormais être traduite dans plus de 70 langues.

Configuration

provideMagicTranslate accepte les options suivantes :

Option	Description
`apiKey`	Obligatoire. Ta clé API Magic Translate.
`language`	Obligatoire. La langue dans laquelle ton contenu est traduit, par exemple `'de'`.
`sourceLanguage`	La langue dans laquelle tes modèles sont écrits. Il est détecté automatiquement, donc ne le règle que si la détection donne de mauvais résultats.
`formality`	`'formal'` ou `'informal'`. Non disponible dans toutes les langues. Tu peux le modifier pour chaque traduction.
`debug`	Enregistre les demandes sur la console.

Changer de langue

Injecte le service MagicTranslate pour lire ou changer la langue actuelle. Chaque composant <t> et t pipe sont mis à jour automatiquement.

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 est un signal, tu peux donc également l'utiliser dans computed et effect.

Rendu côté serveur

Le composant <t> et le t pipe se traduisent dans le navigateur. Avec le rendu côté serveur, le serveur affiche le contenu original, qui est traduit une fois hydraté. Pour envoyer du code HTML entièrement traduit à la place, traduis la page pendant qu'elle est affichée, comme indiqué dans Prerendering.

Exemple de projet

Tu peux trouver un exemple de projet sur GitHub et le suivre en direct.