Introduction to PrimeNG
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.
Then we need to import our theme in the angular.json file.
Update App.Component.html to use the Menu component.
Update App.Component.ts to use the Menu component.
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
