Angular

How to use Magic Translate in Angular apps. The Angular client requires Angular 20 or newer and works with and without zone.js.

Installation

Install the Angular client for Magic Translate in your app.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Then add provideMagicTranslate to your application config.

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

If you don't have an API key yet, sign up for Magic Translate to get one.

Now you can use the <t> component in any component that imports it.

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

That's it. Your app can now be translated into over 70 languages.

Configuration

provideMagicTranslate accepts these options:

Option	Description
`apiKey`	Required. Your Magic Translate API key.
`language`	Required. The language your content is translated into, for example `'de'`.
`sourceLanguage`	The language your templates are written in. It is detected automatically, so only set it if detection gives wrong results.
`formality`	`'formal'` or `'informal'`. Not supported for all languages. You can override it for each translation.
`debug`	Logs the requests to the console.

Changing languages

Inject the MagicTranslate service to read or change the current language. Every <t> component and t pipe updates automatically.

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 is a signal, so you can also use it in computed and effect.

Server-side rendering

The <t> component and the t pipe translate in the browser. With server-side rendering, the server renders the original content, and it is translated after hydration. To send fully translated HTML instead, translate the page while it is rendered, as shown in Prerendering.

Example project

You can find an example project on GitHub and see it live.