Search Tutorials


AngularJS 2 - PrimeNG : UI Components Basic Example | JavaInUse

PrimeNG - UI Components for AngularJS 2 Basic Example

Overview

In this tutorial we will create a simple example for displaying employee information using PrimeNG. This post we introduce the quick Start PrimeNG-
In the following post we see the PrimeNG components in detail- PrimeNG is a collection of rich UI components for Angular 2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces. All widgets are open source and free to use under Apache License 2.0, a commercial friendly license. PrimeNG is developed by PrimeTek Informatics, a company with years of expertise in developing open source UI components. AngularJS makes it possible to use predefined components for development like tables etc. This helps developers save time and efforts. Using PrimeNG developers can create awesome applications in no time

ang6_5

Features of PrimeNG-
  • Derived from the mighty PrimeFaces 60+ Components Easy to Use Accessible
  • Simple Lightweight Powerful
  • Responsive Cross Browser Touch Optimized
  • Active Vibrant Open Source
  • 35+ Free Themes Premium Themes Theme Creator Tool

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

ang6_1

npm start

ang6_2

and go to localhost:3000. We can see the table component created.
ang6_3

On clicking the add button a new employee record can be added.
ang6_4

In the next post we create a primeng example from scratch-Create a PrimeNG Application using different components
 

See Also

Create a PrimeNG Application using different components 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