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

{
  "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

• 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; });
      }
  }
  

• 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);
  
  

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

Download Source Code