AngularJS 2 - PrimeNG : UI Components Basic Example

Video

This tutorial is explained in the below Youtube Video.

Lets start with the implementation.
Create employee-medium.json-

{
    "data":[
        {"name":"Tester", "id":"emp001", "age":"30"}
    ]
}

Create the TypeScript file employeeservice.ts-

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Employee} from '../../app/cars/employee';

@Injectable()
export class EmployeeService {

    constructor(private http: Http) {}

    getEmployeesMedium() {
        return this.http.get('app/resources/data/employee-medium.json')
                    .toPromise()
                    .then(res => <Employee[]> res.json().data)
                    .then(data => { return data; });
    }
}

Create the employee.js-

"use strict";
//# sourceMappingURL=employee.js.map

Create the employee.js.map-

{"version":3,"file":"employee.js","sourceRoot":"","sources":["employee.ts"],"names":[],"mappings":""}

Create the TypeScript file employee.ts-

export interface employee {
   	id;
	name;
	age;
}

Create the employeeservice.js-

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var http_1 = require('@angular/http');
var EmployeeService = (function () {
    function EmployeeService(http) {
        this.http = http;
    }
    EmployeeService.prototype.getEmployeesMedium = function () {
        return this.http.get('app/resources/data/employee-medium.json')
            .toPromise()
            .then(function (res) { return res.json().data; })
            .then(function (data) { return data; });
    };
    EmployeeService = __decorate([
        core_1.Injectable(), 
        __metadata('design:paramtypes', [http_1.Http])
    ], EmployeeService);
    return EmployeeService;
}());
exports.EmployeeService = EmployeeService;
//# sourceMappingURL=employeeservice.js.map

Create the app.html-

<div class="ContentSideSections">
    <div class="Content100 overHidden TextShadow">
        <span class="fontSize30 TextShadow orange mediumFont marginBottom20 dispBlock">PrimeNG Example</span>
    </div>
</div>

<div class="ContentSideSections Implementation">
    <p-dataTable [value]="employees" selectionMode="single" [(selection)]="selectedEmployee" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="10" [responsive]="true">
        <header>TEST CRUD</header>
		 <p-column field="id" header="ID" [sortable]="true"></p-column>
       	 <p-column field="name" header="Name" [sortable]="true"></p-column>
		 <p-column field="age" header="Age" [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="color">ID</label></div>
                <div class="ui-grid-col-8"><input pInputText id="id" [(ngModel)]="employee.id" /></div>
            </div>
			<div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="color">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="brand">Age</label></div>
                <div class="ui-grid-col-8"><input pInputText id="age" [(ngModel)]="employee.age" /></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>

Next use the commands-