Angular PrimeNG DataView Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the dataView component in Angular PrimeNG. We will also learn about the properties, events & styling along with their syntaxes that will be used in the code.  

dataView component: It is used to display data in a grid and list layout with pagination and sorting features.

Properties:

• value: It is an array of objects to display. It is of array data type, the default value is null.
• layout: It is the layout of the items, valid values are “list” and “grid”. It is of string data type, the default value is a list.
• paginator: If specified as true, it shows the pagination. It is of the boolean data type, the default value is false.
• rows: It denotes the number of rows to display per page. It is of number data type, the default value is null.
• totalRecords: It denotes the number of total records, defaults to the length of value when not defined. It is of number data type, the default value is null.
• pageLinks: It denotes the number of page links to display in the paginator. It is of number data type, the default value is 5.
• rowsPerPageOptions: It denotes an array of integer/object values to display inside rows per page dropdown of the paginator. It is of array data type, the default value is null.
• paginatorPosition: It is the position of the paginator, options are “top”, “bottom” or “both”. It is of string datatype. It is of string data type, the default value is bottom.
• alwaysShowPaginator: It specifies whether to show it even there is only one page. It is of the boolean data type, the default value is true.
• showFirstLastIcon: It specifies icons are displayed on the paginator to go first and the last page. It is of the boolean datatype, the default value is true.
• paginatorDropdownAppendTo: It is the target element to attach the paginator dropdown overlay. It accepts any data type, the default value is null.
• paginatorDropdownScrollHeight: It is the paginator dropdown height of the viewport in pixels. It is of string data type, the default value is 200px.
• showCurrentPageReport: It specifies whether to display the current page report. It is of the boolean data type, the default value is false.
• showJumpToPageDropdown: It specifies whether to display a dropdown to navigate to any page. It is of the boolean data type, the default value is false.
• showPageLinks: It specifies whether to show page links. It is of the boolean datatype, the default value is true.
• lazy: It specifies if data is loaded and interacted with in a lazy manner. It is of the boolean data type, the default value is false.
• emptyMessage: It is the text to display when there is no data, it is of string data type.
• style: It is the Inline style of the component. It is of string data type, the default value is null.
• styleClass: It is the Style class of the component. It is of string data type, the default value is null.
• trackBy: It is the function to optimize the dom operations by delegating to ngForTrackBy, the default algorithm checks for object identity. It is of function data type, the default value is null.
• filterBy: It is the comma-separated list of fields in the object graph to search against. It is of string data type, the default value is null.
• filterLocale: It is the locale to use in filtering. It is of string data type, the default value is undefined.
• loading: It is the displays a loader to indicate data load is in progress. It is of the boolean data type, the default value is false.
• loadingIcon: It is the icon to show while indicating data load is in progress. It is of string data type, the default value is pi pi-spinner.
• first: It is the Index of the first row to be displayed, It is of number datatype, the default value is 0.

Events:

• onLazyLoad: It is a callback that is fired when paging, sorting or filtering happens in lazy mode.
• onPage: It is a callback that is fired when pagination occurs.
• onSort: It is a callback that is fired when sorting occurs.
• onChangeLayout: It is a callback that is fired when changing the layout.

Styling: 

• p-dataview: It is a styling Container element.
• p-dataview-list: It is a styling Container element in the list layout.
• p-dataview-grid: It is a styling Container element in the grid layout.
• p-dataview-header: It is a styling Header section.
• p-dataview-footer: It is a styling  Footer section.
• p-dataview-content: It is a styling Container of items.
• p-dataview-emptymessage: It is a styling Empty message element.

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Example 1: This is the basic example that shows how to use the dataView component.

app.component.html

<div class="card">
  <p-dataView
    #dv
    [value]="productNames"
    [paginator]="true"
    [rows]="3"
    filterBy="name"
    layout="grid">
    <ng-template let-product pTemplate="gridItem">
      <div class="p-col-12 p-md-4">
        <div class="product-grid-item card">
          <div class="product-grid-item-top">
            <h1>GeeksforGeeks</h1>
          </div>
          <div class="product-grid-item-content">
            DataView Component Item
          </div>
        </div>
      </div>
    </ng-template>
  </p-dataView>
</div>

app.component.ts

import { Component } from "@angular/core";
import { ProductService } from "./productservice";
import { Product } from "./product";
import { SelectItem } from "primeng/api";
import { PrimeNGConfig } from "primeng/api";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  productNames: string[] = [
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
    "GeeksforGeeks",
  ];

  ngOnInit() {}
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { DataViewModule } from "primeng/dataview";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DataViewModule,
    HttpClientModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 2: In this example, we will use search options with dataView Component and with a different layout of the dataView.

app.component.html

<div class="card">
  <p-dataView
    #dv
    [value]="productNames"
    [paginator]="true"
    [rows]="9"
    filterBy="name"
    [sortField]="sortField"
    [sortOrder]="sortOrder"
    layout="grid">
    <ng-template pTemplate="header">
      <div>
        <span class="p-input-icon-left p-mb-2 p-mb-md-0">
          <i class="pi pi-search"></i>
          <input
            type="search"
            pInputText
            placeholder="Search"
            (input)="dv.filter($event.target.value)"/>
        </span>
        <p-dataViewLayoutOptions>
          Options
        </p-dataViewLayoutOptions>
      </div>
    </ng-template>
    <ng-template let-product pTemplate="gridItem">
      <div class="p-col-12 p-md-4">
        <div class="product-grid-item card">
          <div class="product-grid-item-top">
            <h1>{{product}}</h1>
          </div>
          <div class="product-grid-item-content">
            Text Here
          </div>
        </div>
      </div>
    </ng-template>
  </p-dataView>
</div>

app.component.ts

import { Component } from "@angular/core";
import { ProductService } from "./productservice";
import { Product } from "./product";
import { SelectItem } from "primeng/api";
import { PrimeNGConfig } from "primeng/api";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  productNames: string[] = [
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
    "Heading",
  ];

  ngOnInit() {}
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { DataViewModule } from "primeng/dataview";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DataViewModule,
    HttpClientModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Reference: https://primeng.org/dataview