Angular

Cara menggunakan Magic Translate di aplikasi Angular. Klien Angular membutuhkan Angular 20 atau yang lebih baru dan bekerja dengan dan tanpa zone.js.

Instalasi

Instal klien Angular untuk Magic Translate di aplikasi Anda.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Kemudian tambahkan provideMagicTranslate ke konfigurasi aplikasi Anda.

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

Jika Anda belum memiliki kunci API, daftar Magic Translate untuk mendap atkannya.

Sekarang Anda dapat menggunakan komponen <t> di komponen apa pun yang mengimpornya.

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

Itu saja. Aplikasi Anda sekarang dapat diterjemahkan ke lebih dari 70 bahasa.

Konfigurasi

provideMagicTranslate menerima opsi ini:

Opsi	Deskripsi
`apiKey`	Diperlukan. Kunci API Magic Translate Anda.
`language`	Diperlukan. Bahasa yang diterjemahkan konten Anda, misalnya `'de'`.
`sourceLanguage`	Bahasa yang digunakan templat Anda ditulis. Ini terdeteksi secara otomatis, jadi hanya mengatur jika deteksi memberikan hasil yang salah.
`formality`	`'formal'` atau `'informal'`. Tidak didukung untuk semua bahasa. Anda dapat mengesampingkannya untuk setiap terjemahan.
`debug`	Mencatat permintaan ke konsol.

Mengubah bahasa

Suntikkan layanan MagicTranslate untuk membaca atau mengubah bahasa saat ini. Setiap komponen <t> dan t pipe diperbarui secara otomatis.

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 adalah sinyal, jadi Anda juga dapat menggunakannya di computed dan effect.

Rendering sisi server

Komponen <t> dan t pipe diterjemahkan di browser. Dengan rendering sisi server, server merender konten asli, dan diterjemahkan setelah hidrasi. Untuk mengirim HTML yang diterjemahkan sepenuhnya sebagai gantinya, terjemahkan halaman saat dirender, seperti yang ditunjukkan dalam Prerendering.

Contoh proyek

Anda dapat menemukan contoh proyek di GitHub dan melihatnya langsung.