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. 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
						}
}

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-

angularprime-2-1

Enter a Name and click on the ngprime button named check.
angularprime-2-2

If the User clicks yes-
angularprime-2-3

If the User clicks no-
angularprime-2-4

Search Tutorials

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

Popular Posts