Overview

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.

Technology Stack

We will be making use of:

Video Tutorial

Implementation

For this tutorial, we will make use of Visual Studio Code. The Angular project will be developed as follows:

PrimeNG Project

PrimeNG Project

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.

New Angular CLI

New Angular CLI

Go inside the new project and start it:

Go to the home page:
Angular Home Page

Angular Home Page

Use PrimeNG Components

Install PrimeNG

Install Prime Icons

Install Font Awesome

Install Angular CDK

If we now go to package.json, we will see the following primeng dependencies:

PrimeNG package dependencies

PrimeNG package dependencies

Open the angular.json file and add the following in the styles section:

PrimeNG style sheet

PrimeNG style sheet

Create a new Component, named Helloworld as follows:

In the app-routing.module.ts add the route as hello for our new HelloworldComponent:

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 PrimeNG Component

Add PrimeNG Component

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:

Add PrimeNG

Final ouput

Further Reading



Source link

Write A Comment