Angular 9 + PrimeNG Tutorial- Hello World Example

In this tutorial we will be creating Angular 9 + PrimeNG example. We will be looking at how to setup the project using Angular 9 and PrimeNG.

Let's Begin

Create an Angular 9 Project

We will be making use of the Microsoft Visual Studio Code as the IDE
First we need to install NodeJS. Go to the NodeJS downloads page and download the installer.
Next we will be installing Angular CLI
```
npm install -g @angular/cli
```
Next create a new Angular 9 project
```
ng new primehelloworld
```
Next start the project
```
ng serve
```

If we now go to localhost:4200 - our angular project will get started.

Setting up PrimeNG

We will now be installing PrimeNG and related libraries for the Angular 9 project we just created

Install primeng library as follows-
```
npm install primeng --save
```
Install Prime Icons as follows-
```
npm install primeicons --save
```
Install Font awesome as follows -
```
npm install font-awesome --save
```
Install Angular CDK as follows-
```
npm install @angular/cdk --save
```
Next in the angular.json we will be specifying the theme and the CSS in styles section
```
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/arya-purple/theme.css",
"./node_modules/primeng/resources/primeng.min.css",
```
We have selected the arya-purple theme. You can select some other theme like nova as needed.

So we are done with the PrimeNG setup. Next we will be adding the Helloworld component to our angular project.

Create Helloworld Component

Create a component named helloworld
```
ng generate component helloworld
```

Next we will be adding the routing for the helloworld component

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloworldComponent } from './helloworld/helloworld.component';

const routes: Routes = [
  { path: 'hello', component: HelloworldComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the app.component.html remove everything and just keep the router-outlet tags
```
<router-outlet></router-outlet>
```
Start the angular project
```
ng serve
```
If we now go to localhost:4200/hello

Using PrimeNG Widgets - Button Widget

For using PrimeNG component we will be following 3 steps -

Add the required PrimeNG Component Module to the app.module.ts
If required create the backing data for the PrimeNG component in the typescript file. This is optional and may not be required for all the PrimeNG components.
Finally add the primeng component in the html file

So let us add the PrimeNG Button Component using the above 3 steps-

Add the buttonmodule in the app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloworldComponent } from './helloworld/helloworld.component';
import {ButtonModule} from 'primeng/button';


@NgModule({
  declarations: [
    AppComponent,
    HelloworldComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The button component does not need any backing data.

Add the button component in the html file

<button pButton type="button" class="p-button-info"></button>
<button pButton type="button" label="Primary"></button>
<button pButton type="button" label="Secondary" class="p-button-secondary"></button>
<button pButton type="button" label="Success" class="p-button-success"></button>
<button pButton type="button" label="Info" class="p-button-info"></button>
<button pButton type="button" label="Warning" class="p-button-warning"></button>
<button pButton type="button" label="Help" class="p-button-help"></button>
<button pButton type="button" label="Danger" class="p-button-danger"></button>

If we now go to localhost:4200/hello
angular primeng button

Download Source Code

Download it -
Angular 9 + PrimeNG Helloworld Example

Search Tutorials