PrimeNG I18N API Usage with ngx-translate
Tags: angular, typescript, tutorial, webdev
Published: 2021-07-26 14:29:33

How can we use PrimeNG I18N with ngx-translate? Let's start!

###Project Setup

Let's create a brand new angular application using angular-cli.

```
ng new primeng-i18n-with-ngx
cd primeng-i18n-with-ngx
```

Let's add PrimeNG, PrimeFlex, PrimeIcons, and ngx-translate.

```
npm install primeng primeicons primeflex@2.0.0 @ngx-translate/core @ngx-translate/http-loader @angular/localize
```

We need to import [PrimeNG's](https://primefaces.org/primeng/showcase/#/setup) CSS dependencies to Angular.json.

```
node_modules/primeicons/primeicons.css 
node_modules/primeng/resources/themes/vela-blue/theme.css 
node_modules/primeng/resources/primeng.min.css
```

Now we need a couple of PrimeNG components and ngx-translate setup.

Note: Detailed ngx-translate setup can be found in [official docs](https://github.com/ngx-translate/core#installation).

{%gist https://gist.github.com/yigitfindikli/301ef5b0853619e360077194bcca755f %}

I want to use English to French translation because ngx-translation uses in their example.

Let's create our translation JSON files. The path should be like this:
![structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iz4b8lx0y5427m1ak79.png)
 
en.json:
{%gist https://gist.github.com/yigitfindikli/0cfb8f3297f470a5bf750bbb3fe33bf9 %}

fr.json:
{%gist https://gist.github.com/yigitfindikli/4a757ae020ea34d60f5ccd651797eef7 %}

Let's create our translation logic! We gonna use TranslateService and translate pipe for the general translation functionality for the translation.

app.component.html:

{%gist https://gist.github.com/yigitfindikli/b966ded1addfdb002b54a839bdbb732f %}

app.component.ts:

{%gist https://gist.github.com/yigitfindikli/a948ec1baff8f12dbfb4bc6df0b9d815 %}

Alright, let's try it!
![English](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvk0fdhglfyoq50gfyo7.png)
![French](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb3lloomc6g9c3sl9jqb.png)

It's cool, right?

We need to use PrimeNGConfig for the translationing the PrimeNG components. Usage is quite simple.

Usage from the [Documentation](https://primefaces.org/primeng/showcase/#/i18n):

{%gist https://gist.github.com/yigitfindikli/ce42158cff9b77df7b96e181a907267f %}

But we want use in the our I18N JSON.

Let's create a calendar and change the month and day names!

Firstly we need to add month and day names to translation files.

PrimeNGConfig uses;

* Month names for: monthNames

* Min day names for: dayNamesMin.

Our files should be like this:

{%gist https://gist.github.com/yigitfindikli/89548241211055e0b09e6b1b82db9a43 %}

{%gist https://gist.github.com/yigitfindikli/5acc0e81a3b49c788ff375652d44dbf8 %}
*Note: "primeng" usage just an example.*

Let's create our Calendar.

{%gist https://gist.github.com/yigitfindikli/b969edd1714343d0f96f1e014453cf8f %}

Now we want to change PrimeNG I18N API when ngx-translate trigger. We can use ngx-translate's "stream" observable for the detection.

{%gist https://gist.github.com/yigitfindikli/f29130c635038372419adf28203eb747 %}

Stream is giving to us primeng section(According to the which translation option used). Coming data is:

{%gist https://gist.github.com/yigitfindikli/f45067351ef7bd0d314d3f6bef3908b2 %}

We just binding our translation data to PrimeNGConfig with setTranslation function. And Voilà! Our calendar translated!

![date](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs1wahbg8799yijxupq7.png)

![la-datte](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z2qc9hfq0ur8gbxw4qf.png)

Let's use this logic for Dropdown, ColumnFilter, ConfirmPopup and FileUpload too!

PrimeNG I18N API keys are on available at the [documentation](https://primefaces.org/primeng/showcase/#/i18n).

Now we're gonna update our translation JSONs again.

{%gist https://gist.github.com/yigitfindikli/a532a4ff085fdb0b0185be54a855bf08 %}

{%gist https://gist.github.com/yigitfindikli/4094645117a5f0f0f67cfcee6f66ea54 %}

Now we're just gonna create our components. Because our translation logic is already present. We don't need any logical change. We already did update the translation JSONs!

{%gist https://gist.github.com/yigitfindikli/d7938de79d14722de2c202d6cc3c8375 %}

{%gist https://gist.github.com/yigitfindikli/9a50389b66d70aaa1edc6c1602caf9d0 %}

Here we go!

![en-full](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxtu0ttuxn8svwa38wi0.png)

![fr-full](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy00n5155fwtwcp30vfp.png)

Voilà!

Thanks for the reading!

For Spanish readers: https://www.ibidemgroup.com/edu/internacionalizacion-i18n-primeng-ngx-translate/ (Translated by Chema Bescós 🙏🏻)

Repos:

{% github yigitfindikli/primeng-i18n no-readme %}

{% stackblitz primeng-i18n-api-with-ngx-translate view=preview %}