Angular

Cómo usar Magic Translate en las aplicaciones Angular. El cliente Angular necesita Angular 20 o superior y funciona con y sin zone.js.

Instalación

Instala el cliente Angular para Magic Translate en tu aplicación.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Luego añade provideMagicTranslate a la configuración de tu aplicación.

// 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 aún no tienes una clave de API, regístrate en Magic Translate para conseguir una.

Ahora puedes usar el componente <t> en cualquier componente que lo 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 {}

Eso es todo. Tu aplicación ahora se puede traducir a más de 70 idiomas.

Configuración

provideMagicTranslate acepta estas opciones:

Opción	Descripción
`apiKey`	Necesario. Tu clave de API Magic Translate.
`language`	Necesario. El idioma al que está traducido tu contenido, por ejemplo, `'de'`.
`sourceLanguage`	El idioma en el que están escritas tus plantillas. Se detecta automáticamente, así que configúralo solo si la detección arroja resultados incorrectos.
`formality`	`'formal'` o `'informal'`. No es compatible en todos los idiomas. Puedes anularlo para cada traducción.
`debug`	Registra las solicitudes en la consola.

Cambiar de idioma

Inyecta el servicio MagicTranslate para leer o cambiar el idioma actual. Todos los componentes <t> y t pipe se actualizan automáticamente.

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 es una señal, así que también puedes usarla en computed y effect.

Renderización del lado del servidor

El componente <t> y el t pipe se traducen en el navegador. Con el renderizado del lado del servidor, el servidor renderiza el contenido original y se traduce tras la hidratación. Para enviar HTML totalmente traducido, traduce la página mientras está renderizada, como se muestra en Prerenderizado.

Ejemplo de proyecto

Puedes encontrar un proyecto de ejemplo en GitHub y verlo publicado.