Getting started

Installation

Prerequisites

• Node.js version 18 or higher.
• A package manager: e.g. npm, pnpm, ...

npm

$ npm add @ogs-gmbh/ngx-translate

pnpm

$ pnpm add @ogs-gmbh/ngx-translate

yarn

$ yarn add @ogs-gmbh/ngx-translate

bun

$ bun add @ogs-gmbh/ngx-translate

Configuration

The package should be configured trough an InjectionToken. To do it, you can use the NgModule, that exposes various required functionalities in your app.

Configure

First, you need to define your config. You should place it into a global configuration. A build environment suits the best in this case.

You'll find support for the http config in ngx-http docs.

Every possible property in the translation config is documented aswell in references.

example.ts

import { TranslationConfig } from "@ogs-gmbh/ngx-translate";

const TRANSLATION_CONFIG: TranslationConfig = {
  http: {
    // http config
  },
  translate: {
    // translation config
  }
}

Provide

Providing the configuration can be done either by importing it inside a Component or by inside a NgModule.

Component

Components with and without standalone characteristic are supported.

Usage of imports

Make sure to only import TranslationModule in your Component.

@Component({
  imports: [
    TranslationModule
  ],
  standalone: true
})
export class AppComponent {}

NgModule

Otherwise, you can just import the Module for your NgModule.

Usage of imports

Make sure to use the appropiate TranslationModule.forRoot only inside your Root-NgModule. While TranslationModule can be imported directly in your NgModule.

example.ts

@NgModule({
  imports: [
    TranslationModule.forRoot(TRANSLATION_CONFIG)
  ]
})
export class AppModule {}

Implementation

To make use of the translation lib, simply use our TranslationPipe. The pipe is automatically provided by providing the TranslationModule.

Later in your Angular template, you can simply take the following code as an example:

example.html

<div>
  <p>
    {{
      "This is my value in english"
      | translate : "my-greeting-token"
    }}
  </p>
</div>