Create a simple PrimeNG application using PrimeNG Components like PrimeNG Button, Confirmation Box, Text Box | JavaInUse



Angular2 PrimeNG Tutorial- Create a hello world application using PrimeNG components.

In a previous post PrimeNG-UI Introduction we saw the features of primeng and getting started.

Video

This tutorial is explained in the below Youtube Video.

In this post we develop a primeng application from scratch. For this we will follow the steps-
  • Before we start developing our application, we need to configure our development environment. We need node and npm installed for this tutorial.
  • Create a project folder create a folder named as primeng.
  • Create and configure tsconfig.json which configures the TypeScript compiler.
    {
    	 "compilerOptions": {
    	 "target": "ES5",
    	 "module": "commonjs",
    	 "experimentalDecorators": true,
    	 "noImplicitAny": true
    						}
    }
    
  • Create a javascript file named-systemjs.config.js which loads application and library module.
    System.config({
        transpiler: 'typescript',
        typescriptOptions: {emitDecoratorMetadata: true},
        map: {
          '@angular': 'node_modules/@angular',
          'rxjs'    : 'node_modules/rxjs',
          'primeng':  'node_modules/primeng'
        },
        paths: {
          'node_modules/@angular/*': 'node_modules/@angular/*/bundles'
        },
        meta: {
          '@angular/*': {'format': 'cjs'}
        },
        packages: {
          'app'                              : {main: 'main', defaultExtension: 'ts'},
          'rxjs'                             : {main: 'Rx'},
          '@angular/core'                    : {main: 'core.umd.min.js'},
          '@angular/common'                  : {main: 'common.umd.min.js'},
          '@angular/compiler'                : {main: 'compiler.umd.min.js'},
            '@angular/forms'                : {main: 'forms.umd.min.js'},
            '@angular/router'                : {main: 'router.umd.min.js'},
          '@angular/platform-browser'        : {main: 'platform-browser.umd.min.js'},
          '@angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.min.js'},
           'primeng'                         :{ defaultExtension: 'js' }
        }
    });
    
  • Create and configure package.json with the PrimeNG dependencies.
    {
      "name": "primeng_hello_world",
      "description": " Angular2 + PrimeNG",
      "private": true,
      "scripts": {
        "start": "live-server"
      },
      "dependencies": {
        "@angular/common": "^2.0.0",
        "@angular/compiler": "^2.0.0",
        "@angular/core": "^2.0.0",
        "@angular/forms": "^2.0.0",
        "@angular/http": "^2.0.0",
        "@angular/platform-browser": "^2.0.0",
        "@angular/platform-browser-dynamic": "^2.0.0",
        "@angular/router": "^3.0.0",
        "core-js": "^2.4.0",
        "font-awesome": "^4.6.3",
        "primeng": "^1.0.0-beta.17",
        "rxjs": "5.0.0-beta.12",
        "systemjs": "0.19.37",
        "zone.js": "0.6.21"
      },
      "devDependencies": {
        "live-server": "1.1.0",
        "typescript": "^2.0.0"
      }
    }
    
  • Install the packages using the following command-
    npm install
    
  • Create an app folder and inside it create the following 3 Angular2 typescript files.
    Create Angular 2 component in TypeScript called app.component.ts. We create is a root component, called UserAppComponent.
    import {Component, ViewEncapsulation} from '@angular/core';
    import {ConfirmationService, Message} from "primeng/components/common/api";
    import {ButtonModule} from 'primeng/primeng';
    
    
    @Component({
        selector: 'app',
        template: `<h1>PrimeNG Hello World</h1>
                   <input type="text" pInputText placeholder="Please enter your name"
                   (change)="onChangeEvent($event)" />
                   <button pButton type="text"
                        (click)="getReponse()" icon="fa-check" label="Check"></button>
    
                   <p> {{checkUserInput}}
    
                   <p-confirmDialog width="400"></p-confirmDialog>`
        providers:  [ConfirmationService]
    })
    export class UserAppComponent {
        name: string;
        checkUserInput: string;
    
        constructor(private checkResponseService: ConfirmationService) {}
        
         onChangeEvent({target}){
            this.name = target.value;
        }
    
           getReponse(){
    
            this.checkResponseService.confirm({
                message: ` Hi this.name, is this your first PrimeNG program?`,
                header: 'Greeting',
                icon: 'fa fa-question-circle',
                accept: () => {
                    
                    this.checkUserInput = this.name + " responded " + "This is his first PrimeNG Program";
                },
                reject: () => {
                    this.checkUserInput = this.name + " responded " + "This is not his first PrimeNG Program";
                }
            });
        }
    }
    
    After we created our root component UserAppComponent along with its template, we need to tell angular to load it using Bootstrap using the following app.module.ts.
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import {InputTextModule, ButtonModule, ConfirmDialogModule} from 'primeng/primeng';
    import { UserAppComponent }  from './app.component';
    
    @NgModule({
        imports:      [ BrowserModule,
                        InputTextModule,
                        ButtonModule,
                        ConfirmDialogModule
        ],
        declarations: [ UserAppComponent ],
        bootstrap:    [ UserAppComponent ]
    })
    export class AppModule { }
    
    Finally bootstrap the AppModule we created above using the following main.ts.
    				
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import { AppModule }  from './app.module';
    
    platformBrowserDynamic().bootstrapModule(AppModule);
    
  • Create the index.html. In this HTML index page, we first load Internet Explorer polyfills to enable ES2015 promises and dynamic module loading features working on IE. After that, we load the polyfills for Angular 2 which is required by the framework including ES2015 shim, zone.js, and others. Then the SystemJS library, which load application and library modules, and Reactive Extensions RxJS library. <app> became the root component of our app that is selected by @Component selector in AppComponent metadata.
    <!DOCTYPE html>
    <html>
    <head>
      <title>PrimeNG Hello World</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/themes/omega/theme.css" />
      <link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.min.css" />
      <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.css" />
    
      <script src="node_modules/typescript/lib/typescript.js"></script>
      <script src="node_modules/core-js/client/shim.min.js"></script>
      <script src="node_modules/zone.js/dist/zone.js"></script>
      <script src="node_modules/systemjs/dist/system.src.js"></script>
      <script src="systemjs.config.js"></script>
      <script>
        System.import('app').catch(function(err){ console.error(err); });
      </script>
    </head>
    
    <body>
    <app>Loading...</app>
    </body>
    </html>
    
Now run the command-
npm start. The following browser will get started-
Enter a Name and click on the ngprime button named check.
If the User clicks yes-
If the User clicks no-

Download Source Code

Download it - PrimeNG Simple Example


See Also

PrimeNG-UI Components for AngularJS 2 Basic Example Creating a Simple AngularJS Application with ngRoute and Partials Removing the # from the AngularJS URL Use Google reCaptcha with AngularJS Use AngularJS NgCloak directives Example