Skip to content
ngx-translate

Translating your components

ngx-translate allows you to easily integrate translations into both your templates and code.

Using Translations in Templates

Using translations in the templates is straight forward. You just have to make sure, that the TranslatePipe and TranslateDirective are available in the component.

If you are using NgModules, there’s nothing to do inside the component itself. The import is either in the app.module.ts or the module itself.

When using standalone components, import the TranslatePipe and TranslateDirective like this:

your-component.ts
import {Component} from '@angular/core';
import {TranslatePipe, TranslateDirective} from "@ngx-translate/core";


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TranslatePipe, TranslateDirective],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class YourComponent {
  ...
}

TranslatePipe

Basic usage

The easiest way to translate text is using the TranslatePipe:

app.template.html
<div>{{ 'app.hello' | translate }}</div>

With parameters

It’s also possible to add parameters like this:

app.template.html
<div>{{ 'app.hello' | translate:{name} }}</div>

And in your component define name like this:

app.component.ts
name = "Andreas"

In the language file, use {{name}} as placeholder:

assets/i18n/en.json
{
    'app.hello': "Hello {{name}}!"
}

TranslateDirective

This is how you use the directive:

<div [translate]="'app.hello'" [translateParams]="{name: 'John'}"></div>

Or even simpler using the content of your element as a key:

<div translate [translateParams]="{name: 'John'}">HELLO</div>

Using HTML Tags in Translations

You can easily use raw HTML tags within your translations.

{
    "app.hello": "Welcome to my Angular application!<br><strong>This is an amazing app which uses the latest technologies!</strong>"
}

To render them, simply use the innerHTML attribute with the pipe on any element.

<div [innerHTML]="'app.hello' | translate"></div>

[innerHTML] should be safe to use because it uses Angular’s DomSanitizer to filter potentially harmful tags like <script> or <style>.

Using Translations in Code

To use translations in your code, you need to utilize Dependency Injection in the constructor to access the TranslateService. This service allows you to load translations, switch languages, and retrieve translated messages directly within your application logic.

your-component.ts
import {Component} from '@angular/core';
import {TranslateService, _} from "@ngx-translate/core";


@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class YourComponent {
  constructor(private translate: TranslateService) {
    this.translate.get(_('app.hello'), {value: 'world'}).subscribe((res: string) => {
      console.log(res);
      //=> 'hello world'
    });
  }
}

The _() function is a marker function. It helps BabelEdit and the ngx-translate-extract plugin to distinguish between regular string and translation IDs in your app for automated extraction of translation stings. Simply wrap all IDs with _() - e.g. _('demo.title).

You might wonder why the get() method uses a subscription to retrieve translations. The reason is that your language file might not be loaded at the time the get() function is called, so the update is triggered once the file finishes loading.

Alternatively, you can use stream(), which works similarly to get() but has the added benefit of firing again whenever the language changes. This ensures the translation stays up to date even if the user switches languages.

For cases where you need an immediate, synchronous translation result, you can use instant(). This method returns the translation instantly but only works if the translation file is already loaded or if translations have been manually set using setTranslation().

Using Dynamic Ids

You can construct the translation keys dynamically by using simple string concatenation inside the template:

app.template.html
<ul>
  <li *ngFor="let language of languages">{{ 'languages.' + language | translate }}</li>
</ul>

Where languages is an array member of your component:

app.component.ts
languages = ['en', 'fr', 'de'];

You language file would look like this;

assets/i18n/en.json
{
    'languages': {
        'en': 'English',
        'fr': 'French',
        'de': 'German'
    }
}

You can also use the output of the built-in pipes uppercase and lowercase in order to guarantee that your dynamically generated translation keys are either all uppercase or all lowercase. For example:

<p>{{ 'roles.' + role | lowercase | translate }}</p>
role = 'ADMIN';

will match the following translation:

{
  "roles": {
    "admin": "Administrator"
  }
}
Imprint Privacy