Share2

Tweet

Angular 4/5, use dataGrid feature of primeNG/primefaces to show listing of data in grid view with pagination.  Next article will share other features of primeNG/primefaces like tabView, Dailog, charts, accordion etc

.

PrimeNG provides rich set of open source native Angular UI components which helps to show dataGrid, tabView, accordion, button, calenadar, dialog, modal, charts and many more

First you need to download npm to your project by using below command

npm install primeng --save

Once it’s get downloaded then import related component like dataGrid, tabView like below

In componentFactoryName.module.ts file add below import

import {AccordionModule} from 'primeng/accordion';     //for accordion and accordion tab

import {MenuItem} from 'primeng/api';                 //for api

import {MenuItem} from 'primeng/datagrid';            //to show listing of data in datagrid view with sorting

import { DialogModule } from 'primeng/dialog'; // dialog/modal popup feature

import { TabViewModule } from 'primeng/tabview'; //tabview structure

if priming/dialog path not found at your project then you can specify full path like below

import { DialogModule } from './../../../node_modules/primeng/components/dialog/dialog';

It applies to all components path.

Animations with Angular 4+

Various components utilize angular animations to improve the user experience, starting with Angular 4

animations have their own module so you need to import BrowserAnimationsModule to your application.

npm install @angular/animations --save

Also import,

import {BrowserModule} from '@angular/platform-browser';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({

    imports: [ DataGridModule, DialogModule, BrowserModule , BrowserAnimationsModule, TabViewModule],

    declarations: [ DashboardComponent],

    exports: [ DashboardComponent ],

    providers: []

})

Add below dependencies  and css files in angular-cli.json File

 

"dependencies": {
  //...
  "primeng": "^4.1.0",
  "font-awesome": "^4.7.0"
},

"styles": [
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/primeng/resources/primeng.min.css",
  //...
],

In componentFactoryName.html, use below html which will generate grid of data

 

<p-dataGrid [value]="cars" [paginator]="true" [rows]="8">         

    <ng-template let-car pTemplate="item">                         

        <!-- Data Grid -->                    

        <p-panel *ngIf="car.vin != 0000" [header]="car.vin" [style]="{'text-align':'center'}" class='panel-wrap'>             

          <div class="card">

            <img class="card-img" src="assets/data/car/{{car.image}}.png" width="200" height="110">

            <div class="card-wrap">

              <h4 class="card-title mt-3">{{car.title}}</h4>

              <div class="card-reg-number">Reg # {{car.vin}}</div>

            </div>

          </div>             

        </p-panel>   

        <!-- Data Grid -->                   

    </ng-template>

  </p-dataGrid>