Angular

Come usare Magic Translate nelle app Angular. Il client Angular richiede Angular 20 o versioni successive e funziona con e senza zone.js.

Installazione

Installa il client Angular per Magic Translate nella tua app.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Quindi aggiungi provideMagicTranslate alla configurazione della tua applicazione.

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

Se non hai ancora una chiave API, iscriviti a Magic Translate per ottenerne una.

Ora puoi usare il componente <t> in qualsiasi componente che lo importa.

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

Questo è tutto. La tua app ora può essere tradotta in oltre 70 lingue.

Configurazione

provideMagicTranslate accetta queste opzioni:

Opzione	Descrizione
`apiKey`	Obbligatorio. La tua chiave API Magic Translate.
`language`	Obbligatorio. La lingua in cui vengono tradotti i tuoi contenuti, ad esempio `'de'`.
`sourceLanguage`	La lingua in cui sono scritti i tuoi modelli. Viene rilevato automaticamente, quindi impostalo solo se il rilevamento dà risultati errati.
`formality`	`'formal'` o `'informal'`. Non supportato per tutte le lingue. Puoi sostituirlo per ogni traduzione.
`debug`	Registra le richieste nella console.

Cambiare lingua

Inserisci il servizio MagicTranslate per leggere o cambiare la lingua corrente. Ogni componente <t> e t pipe si aggiornano automaticamente.

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 è un segnale, quindi puoi usarlo anche in computed e effect.

Rendering lato server

Il componente <t> e il t pipe si traducono nel browser. Con il rendering lato server, il server esegue il rendering del contenuto originale e viene tradotto dopo l'idratazione. Per inviare invece un codice HTML completamente tradotto, traduci la pagina mentre viene renderizzata, come mostrato in Prerendering.

Esempio di progetto

Puoi trovare un progetto di esempio su GitHub e vederlo dal vivo.