Angular

Como usar Magic Translate em Angular aplicativos. O cliente Angular requer Angular 20 ou mais recente e funciona com e sem zone.js.

Instalação

Instale o cliente Angular para Magic Translate em seu aplicativo.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Em seguida, adicione provideMagicTranslate à configuração do seu aplicativo.

// 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 você ainda não tem uma chave de API, inscreva-se no Magic Translate para obter uma.

Agora você pode usar o componente <t> em qualquer componente que o 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 {}

É isso mesmo. Seu aplicativo agora pode ser traduzido para mais de 70 idiomas.

Configuração

provideMagicTranslate aceita as seguintes opções:

Opção	Descrição
`apiKey`	Obrigatório. Sua chave de API Magic Translate.
`language`	Obrigatório. O idioma para o qual seu conteúdo foi traduzido, por exemplo, `'de'`.
`sourceLanguage`	O idioma em que seus modelos são escritos. Ele é detectado automaticamente, portanto, defina-o somente se a detecção der resultados errados.
`formality`	`'formal'` ou `'informal'`. Não é compatível com todos os idiomas. Você pode substituí-lo para cada tradução.
`debug`	Registra as solicitações no console.

Alterando idiomas

Injete o serviço MagicTranslate para ler ou alterar o idioma atual. Cada componente <t> e t pipe são atualizados 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 é um sinal, então você também pode usá-lo em computed e effect.

Renderização do lado do servidor

O componente <t> e o t pipe são traduzidos no navegador. Com a renderização do lado do servidor, o servidor renderiza o conteúdo original e ele é traduzido após a hidratação. Em vez disso, para enviar HTML totalmente traduzido, traduza a página enquanto ela é renderizada, conforme mostrado em Pré-renderização.

Exemplo de projeto

Você pode encontrar um exemplo de projeto no GitHub e vê-lo ao vivo.