OneCX Multi-language Translations Usage

Overview

This document provides guidance on how to use multi-language translations in a OneCX compatible application after setting it up using the multi-language setup document.

Prerequisites

Before proceeding, ensure that the multi-language setup is complete.

Usage

It is possible to use functionalities from @ngx-translate library to implement translations in the application.

Templates Usage

Use translations via translate pipe.

component.html

<p>{{ 'HELLO' | translate }}</p>

TranslateService Usage

Use translations via TranslateService.

component.ts

import { TranslateService } from '@ngx-translate/core';

this.translate.get('WELCOME').subscribe((translated: string) => {
    console.log('Translated message:', translated);
});

With Parameters

Use translations with parameters. Example:

en.json

{
  "GREETING": "Hello, {{name}}! Welcome back."
}

component.html

<p>{{ 'GREETING' | translate:{ name: 'Alice' } }}</p>

component.ts

import { TranslateService } from '@ngx-translate/core';
this.translate.get('GREETING', params).subscribe((translated: string) => {
    console.log('Translated with params:', translated);
});