Monday, July 30, 2018

Primeng with Angular 6 example from scratch with tutorials | Primeng Angular Tutorial Example

In my previous article, we covered the basics of primeng UI library. In this article, we are going to learn how to set up an angular project with primeng using angular cli

Learn Angular4/5/6 with primeng components.

Angular Cli is a tool to generate an angular project from scratch. It is a code generator for the folder structure of the angular project. The advantages with cli, saves a lot of time instead of writing code from scratch and error-prone as it generates configuration required files

First, you need to have angular cli installed globally using this command

npm install @angular/cli -g
Once cli is installed, please issue a below command to check the version
B:\angularclidemo>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.1
Node: 8.10.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.1
@angular-devkit/core         0.7.1
@angular-devkit/schematics   0.7.1
@schematics/angular          0.7.1
@schematics/update           0.7.1
rxjs                         6.2.2
typescript                   2.7.2
This shows angular cli is installed with the latest angular 6 version. Next step is to create an Angular project with CLI tool.
ng new myapp
This creates an angular prototype with all initial configuration and main module and initial component. next, go to your project directory, install the dependencies using below command
B:\angularclidemo\myapp\ npm install
Once you installed dependencies, start web server using CLI command as below
ng serve
This starts the server listening to 4200. on accessing this http://localhost:4200/ page, you will get below page as per screenshot Angular cli example

Install primeng with Angular 6

Next step is to install primeng dependencies, Font awesome is required for primeng installation. Go to the project directory and run this below command
npm install primeng --save
npm install font-awesome --save
This installs required dependencies in the project. This command create/modify the following things-  added this entry under dependencies section in package.json
"dependencies": {
  //...
  "font-awesome": "^4.7.0",
    "primeng": "^6.0.2",
},
    
It creates and installs dependencies in the following folder
myapp\node_modules\font-awesome
myapp\node_modules\primeng

Global Styles configuration 

You need to configure primeng styles in the angular application at application using a configuration file. Below angular 6 versions, the configuration file is angular-cli.json For Angular 6 and more versions, the configuration file is angular.json file Angular-cli.json is a project level configuration file which contains global configuration changes. Add this thing under the style section in angular.json file
"styles": [
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/primeng/resources/primeng.css",
]
we added the theme of Omega, there are a lot of themes(Redmond, rocket, darkness ...) available with primeng installation. Please see the complete list of themes primeng themes configuration

You need to restart after modifying angular.json file to reflect changes Add primeng components to angular application Before using components in Angular code, you need to enable animation module

Add BrowserAnimationsModule

 A lot of components required to angular animations module to have better experience. Animation modules are located in @angular/animations module. You need to install this dependency.
npm install @angular/animations --save
Once the animation module is installed, Import BrowserAnimationModule in primeng.module.ts as like below. primeng.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PrimengComponent} from './primeng.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // added this

@NgModule({
  declarations: [
    PrimengComponent

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule // added this
  ],
  providers: [],
  bootstrap: [PrimengComponent]
})
export class PrimengAppModule { }
if you are designing input forms, you need to do statement - import { FormsModule } from '@angular/forms' like BrowserAnimationModule Next is adding primeng modules. We are going to add a simple button with displaying the Hello World message. We need to add ButtonModule in our application like below
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PrimengComponent} from './primeng.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { ButtonModule } from 'primeng/components/button/button';// added this

@NgModule({
  declarations: [
    PrimengComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonModule// added this
  ],
  providers: [],
  bootstrap: [PrimengComponent]
})
export class PrimengAppModule { }

And add buttons in primeng.component.html file
<div style="text-align:center">
   <h1>
      Primeng Angular 6 Demo
   </h1>
</div>
<h4>
   <p-button  label="p-button" (onClick)="clickEvent()"></p-button>
   <button pButton type="button" label="Normal Button"  (click)="clickEvent()" ></button>
</h4>
Clicks Count: {{count}}

added click event method in primeng.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './primeng.component.html',
  styleUrls: ['./primeng.component.css']
})
export class PrimengComponent {
    count: number = 0;

  clickEvent() {
        this.count++;
    }
}
first button p-button is primeng button which has onClick event handler with brackets surrounded. the second button is a normal HTML button which added pButton as an attribute to make it primeng button here the event is normal click event with surrounded braces Please note that every primeng components are always prefixed with p. And the output of this application is shown as below primeng Angular 6 application from scratch

Primeng Aot production support 

ng serve 
  This commands creates development bundle, build and deploy with starting the web server.
ng build --prod - 
   This builds bundle for the production code. For production code, debug disabled, static resources minification etc.
ng build --prod --aot 
   This builds bundles code for production with aot flag enabled. aot is an ahead of time compiler for converting HTML and typescript into efficient javascript. primeng added support for aot production deployment too.

Hope you liked my article, Please like and share on facebook/twitter.

Related article


EmoticonEmoticon