DEV Community: Yiğit FINDIKLI

PrimeNG I18N API Usage with ngx-translate

Yiğit FINDIKLI — Mon, 26 Jul 2021 14:29:33 +0000

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 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.

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:

en.json:

fr.json:

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

app.component.html:

app.component.ts:

Alright, let's try it!

It's cool, right?

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

Usage from the Documentation:

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:

Note: "primeng" usage just an example.

Let's create our Calendar.

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

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

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

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

PrimeNG I18N API keys are on available at the documentation.

Now we're gonna update our translation JSONs again.

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!

Here we go!

Voilà!

Thanks for the reading!

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

Repos:

yigitfindikli / primeng-i18n

Theming with PrimeNG CSS Variables

Yiğit FINDIKLI — Tue, 18 May 2021 16:29:28 +0000

We introduced CSS variables in Version 11.3.0-RC.1. This article will explain how to use the new PrimeNG CSS variables and design logic. Let's start!

Project Setup

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



ng new primengColor
cd primengColor

Let's add PrimeNG, PrimeFlex, and PrimeIcons.



npm install primeng primeicons primeflex

We need to import PrimeNG's CSS dependencies to Angular.json.



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

Lastly, we need to import a couple of PriemNG components. I want to create a simple form and a sidebar. We're gonna use ButtonModule, SidebarModule, InputTextModule, InputTextareaModule, and ToastModule.

We're ready for using PrimeNG, let's start!

Implementation

We'll start with surfaces and general colors.

General colors are:

Our project gonna use text-color and font-family.

Surface colors are:

Surface colors can be useful when designing the surface layers and separators.

Each PrimeNG theme exports its own color palette so all colors will be adaptive to our theme.

Let's use it in our style.css:

Now we can create our simple application.

Topbar

p-shadow-2 and p-p-2 are coming from PrimeFlex. p-shadow-* is an elevation helper. We can use it to specify the separation between surfaces and elements along the z-axis. p-p-* is a spacing helper. p-p-* gives padding to elements. In our case this padding is 0.5rem.

I'm gonna use the primary color for the topbar's background color. I want to topbar's background color the same as the button's color (The pButton's default background color is already the primary color).

Sidebar & Simple Form

We don't need CSS variables now because PrimeNG components using already! Let's create properties for our components!

Message Service there is for p-toast and PrimeNGConfig there is for activation ripple.

We're gonna add our components to app.component.html!

p-fluid there are for input width's .p-formgrid, p-gird coming from PrimeFlex!

Now our app looks like this:

Let's change the theme to bootstrap4-dark-purple:



node_modules/primeng/resources/themes/bootstrap4-dark-purple/theme.css

Let's try with vela-green too!



node_modules/primeng/resources/themes/vela-green/theme.css

Voilà!

Variables always will be compatible with your theme choices!

Thanks for your reading.

Playground:

Github repo: https://github.com/yigitfindikli/primeng-colors-example