In this tutorial, we will be developing an Angular 8 application and make use of PrimeNG Components. We will learn how to set up PrimeNG for an Angular application. In the next tutorial, we will implement Angular 8 + PrimeNG Tutorial – Implement DataTable Component.
We will be making use of:
For this tutorial, we will make use of Visual Studio Code. The Angular project will be developed as follows:
Develop Angular Application
Install NodeJS. Go to NodeJS downloads page and download the installer. Start the installer and install Node.js.
Install Angular CLI using the command:
Create a new Angular Project, named library-management.
Go inside the new project and start it:
Go to the home page:
Use PrimeNG Components
Install Prime Icons
Install Font Awesome
Install Angular CDK
If we now go to package.json, we will see the following primeng dependencies:
Open the angular.json file and add the following in the styles section:
Create a new Component, named
Helloworld as follows:
In the app-routing.module.ts add the route as
hello for our new
Also, in app.component.html, only keep the following code and remove the remaining:
Start the application using:
Adding the PrimeNG Component in Angular Application
For adding any PrimeNG Component in Angular, we will follow the steps below.
Add the PrimeNG Drowpdown module to the app.module.ts file.
Create Backing Data for the dropdown in the helloworld.component.ts.
Use the PrimeNG Dropdown tag in the helloworld.component.html file.
If we now go to – localhost:4200/hello we see the following: