Angular2 PrimeNG Tutorial- Create a Hello World application using DataTable Grid | JavaInUse




Angular2 PrimeNG Tutorial- Create a Hello World application using DataTable Grid.

In a previous post PrimeNG-UI Introduction we saw created an application using various primeng components like dialogbox etc. In this tutorial we create an application using the Data Table component. 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",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true
      },
      "exclude": [
        "node_modules/*",
        "**/*-aot.ts"
      ]
    }
    
  • Create a javascript file named- systemjs.config.js which loads application and library module.
    (function (global) {
      System.config({
        paths: {
          'npm:': 'node_modules/'
        },
        map: {
          app: 'app',
          '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
          '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
          '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
          '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
          '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
          '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
          '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
          '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
          '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
          'rxjs':                      'npm:rxjs',
          'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
          'primeng':                   'npm:primeng'                
        },
        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          primeng: {
              defaultExtension: 'js'
          }
        }
      });
    })(this);
    
  • Create and configure package.json with the PrimeNG dependencies.
    {
      "name": "primeng-datagrid",
      "version": "v1.0.0-SNAPSHOT",
      "scripts": {
         "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
         "lite": "lite-server",
         "tsc": "tsc",
         "tsc:w": "tsc -w"
      },
      "license": "ISC",
      "dependencies": {
          "@angular/common": "~2.2.0",
          "@angular/compiler": "~2.2.0",
          "@angular/core": "~2.2.0",
          "@angular/forms": "~2.2.0",
          "@angular/http": "~2.2.0",
          "@angular/platform-browser": "~2.2.0",
          "@angular/platform-browser-dynamic": "~2.2.0",
          "@angular/router": "~3.2.0",
          "angular-in-memory-web-api": "~0.1.15",
          "systemjs": "0.19.40",
          "core-js": "^2.4.1",
          "reflect-metadata": "^0.1.8",
          "rxjs": "5.0.0-beta.12",
          "zone.js": "^0.6.26",
          "primeng": "^1.0.0"
      },
      "devDependencies": {
          "concurrently": "^3.1.0",
          "lite-server": "^2.2.2",
          "typescript": "^2.0.10",
          "@types/node": "^6.0.46"
      }
    }
    
  • Install the packages using the following command-
    npm install
    
Create an app folder and inside it create the employees folder. This folder following contains following 2 Angular2 typescript files.
  • employee.ts
    export interface Employee {
        name?;
        empId?;
        city?;
    }
    

  • employeeService.ts
    import {Injectable} from '@angular/core';
    import {Http, Response} from '@angular/http';
    import {Employee} from '../../app/employees/employee';
    
    @Injectable()
    export class EmployeeService {
    
        constructor(private http: Http) {}
    
        getEmployeesMedium() {
            return this.http.get('app/employees-medium.json')
                        .toPromise()
                        .then(res => <Employee[]> res.json().data)
                        .then(data => { return data; });
        }
    }
    
In the app folder create the following files-
  • employees-medium.json
    {
        "data":[
            {"name":"javainuse1","empId":"J12","city":"city1"},
             {"name":"javainuse2","empId":"J13","city":"city2"},
            {"name":"javainuse3","empId":"J14","city":"city3"},
           {"name":"javainuse4","empId":"J15","city":"city4"}
        ]
    }
    
  • Create Angular 2 component in TypeScript called app.component.ts. We create is a root component, called UserAppComponent.
    import {Component} from '@angular/core';
    import {Employee} from './employees/employee';
    import {EmployeeService} from './employees/employeeservice';
    
    class PrimeEmployee implements Employee {
        constructor(public name?, public empId?, public city?) {}
    }
    
    @Component({
    	templateUrl: 'app/app.component.html',
    	selector: 'my-app'
    })
    export class AppComponent {
    
    	displayDialog: boolean;
    
        employee: Employee = new PrimeEmployee();
    
        selectedEmployee: Employee;
    
        newEmployee: boolean;
    
        employees: Employee[];
    
        constructor(private employeeService: EmployeeService) { }
    
        ngOnInit() {
            this.employeeService.getEmployeesMedium().then(employees => this.employees = employees);
        }
    	
    	 showDialogToAdd() {
            this.newEmployee = true;
            this.employee = new PrimeEmployee();
            this.displayDialog = true;
        }
    
        save() {
            if(this.newEmployee)
                this.employees.push(this.employee);
            else
                this.employees[this.findSelectedCarIndex()] = this.employee;
    
            this.employee = null;
            this.displayDialog = false;
        }
    
        delete() {
            this.employees.splice(this.findSelectedCarIndex(), 1);
            this.employee = null;
            this.displayDialog = false;
        }
    
        onRowSelect(event) {
            this.newEmployee = false;
            this.employee = this.cloneCar(event.data);
            this.displayDialog = true;
        }
    
        cloneCar(c: Employee): Employee {
            let employee = new PrimeEmployee();
            for(let prop in c) {
                employee[prop] = c[prop];
            }
            return employee;
        }
    
        findSelectedCarIndex(): number {
            return this.employees.indexOf(this.selectedEmployee);
        }
    
       
    }
    
  • Create the app.component.html file to display the employee grid information as follows-
    <div>
        <p-dataTable [value]="employees" selectionMode="single" [(selection)]="selectedEmployee" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="10" [responsive]="true">
            <header>Employee Management Service</header>
            <p-column field="name" header="name" [sortable]="true"></p-column>
            <p-column field="empId" header="empId" [sortable]="true"></p-column>
            <p-column field="city" header="city" [sortable]="true"></p-column>
            <footer><div class="ui-helper-clearfix" style="width:100%"><button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button></div></footer>
        </p-dataTable>
    
        <p-dialog header="Employee Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
            <div class="ui-grid ui-grid-responsive ui-fluid ui-grid-pad" *ngIf="employee">
                <div class="ui-grid-row">
                    <div class="ui-grid-col-4"><label for="name">name</label></div>
                    <div class="ui-grid-col-8"><input pInputText id="name" [(ngModel)]="employee.name" /></div>
                </div>
                <div class="ui-grid-row">
                    <div class="ui-grid-col-4"><label for="empId">empId</label></div>
                    <div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="employee.empId" /></div>
                </div>
                <div class="ui-grid-row">
                    <div class="ui-grid-col-4"><label for="city">city</label></div>
                    <div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="employee.city" /></div>
                </div>
            </div>
    		<footer>
                <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                    <button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"></button>
                    <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
                </div>
            </footer>
        </p-dialog>
    </div>
    
  • 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 {FormsModule} from '@angular/forms';
    import {HttpModule}    from '@angular/http';
    import {BrowserModule} from '@angular/platform-browser';
    import 'rxjs/add/operator/toPromise';
    
    import {AppComponent}  from './app.component';
    import {EmployeeService} from './employees/employeeservice';
    import {InputTextModule,DataTableModule,ButtonModule,DialogModule} from 'primeng/primeng';
    
    @NgModule({
      imports:      [BrowserModule,FormsModule,HttpModule,InputTextModule,DataTableModule,ButtonModule,DialogModule],
      declarations: [AppComponent],
      bootstrap:    [AppComponent],
      providers:    [EmployeeService]
    })
    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.
<html>
  <head>
    <title>PrimeNG Data Grid</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="app/resources/icons/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.css" />

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <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/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
        
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
Now run the command-
npm start. The following browser will get started-
Click on Add button to add new Employee details-
Click on any record to modify it.

Download Source Code

Download it - PrimeNG DataTable 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