Intro to PrimeNG

Introduction to PrimeNG

by 

| June 15, 2021 | in

PrimeNG is a framework for building web applications, comparable to Angular Material, which we have used previously. PrimeNG is a lot like Angular Material; it provides a bunch of components we can use to build our web applications. The difference with PrimeNG is the sheer number of components. PrimeNG has more components than Angular material, which makes it more appealing for business software that has a lot of data forms.

Let’s dive into PrimeNG. We’ll begin by creating a new Angular project.

ng n ChadDemo

After we have our Angular project, we need to install PrimeNG.

npm install primeng --save
npm install primeicons --save

After installing PrimeNG, we have a good number of things to do to get it to work. In this example, we will bring in a menu component.

First, we need to import any modules we need in the App.Modules.ts. For example, see how MenubarModule is imported in the example below.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MenubarModule } from 'primeng/menubar';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
MenubarModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
view raw App.Module.ts hosted with ❤ by GitHub

Then we need to import our theme in the angular.json file.

"styles": [
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],
view raw angular.json hosted with ❤ by GitHub

Update App.Component.html to use the Menu component.

<p-menubar [model]="items"> </p-menubar>
<router-outlet></router-outlet>

Update App.Component.ts to use the Menu component.

import { Component } from '@angular/core';
import { MenuItem, MessageService, PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'ChadDemo';
items: MenuItem[] = [];
ngOnInit() {
this.items = [
{
label: 'Label 1',
command: () => this.label1(),
},
{
label: 'Label 2',
},
];
}
label1() {
alert('label 1');
}
}

It takes quite a few code changes just to bring in a menu component. But PrimeNG has a wide list of components, and once you are past this initial setup, future components are easier to add. In the next blog post, we will look at PrimeNG’s table component.

References

https://www.primefaces.org/primeng/showcase/#/setup

author avatar
Chad Michel Senior Software Architect
Chad is a lifelong Nebraskan. He grew up in rural Nebraska and now lives in Lincoln. Chad and his wife have a son and daughter.

Related posts