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 primengColorcd 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…


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-ngxcd 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:

Yiğit Fındıklı

Lead Developer of PrimeNG

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store