Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente dataView en Angular PrimeNG. También aprenderemos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se utilizarán en el código.
Componente dataView : se utiliza para mostrar datos en un diseño de cuadrícula y lista con funciones de paginación y clasificación.
Propiedades:
- valor : es una array de objetos para mostrar. Es de tipo de datos de array, el valor predeterminado es nulo.
- layout : Es el layout de los ítems, los valores válidos son “list” y “grid”. Es de tipo de datos de string, el valor predeterminado es una lista.
- paginador : si se especifica como verdadero, muestra la paginación. Es del tipo de dato booleano, el valor por defecto es false.
- filas : Indica el número de filas a mostrar por página. Es de tipo de dato numérico, el valor por defecto es nulo.
- totalRecords : denota el número de registros totales, el valor predeterminado es la longitud del valor cuando no está definido. Es de tipo de dato numérico, el valor por defecto es nulo.
- pageLinks : indica el número de enlaces de página para mostrar en el paginador. Es de tipo de dato numérico, el valor por defecto es 5.
- rowsPerPageOptions : denota una array de valores enteros/objetos para mostrar dentro de las filas por menú desplegable de página del paginador. Es de tipo de datos de array, el valor predeterminado es nulo.
- paginatorPosition : Es la posición del paginador, las opciones son “arriba”, “abajo” o “ambos”. Es de tipo de datos de string. Es de tipo de datos de string, el valor predeterminado es inferior.
- alwaysShowPaginator : especifica si mostrarlo incluso si solo hay una página. Es del tipo de dato booleano, el valor predeterminado es verdadero.
- showFirstLastIcon : especifica que los íconos se muestran en el paginador para ir a la primera y última página. Es del tipo de datos booleano, el valor predeterminado es verdadero.
- paginatorDropdownAppendTo : es el elemento de destino para adjuntar la superposición desplegable del paginador. Acepta cualquier tipo de dato, el valor por defecto es nulo.
- paginatorDropdownScrollHeight : es la altura desplegable del paginador de la ventana gráfica en píxeles. Es de tipo de datos de string, el valor predeterminado es 200px.
- showCurrentPageReport : especifica si mostrar el informe de la página actual. Es del tipo de dato booleano, el valor por defecto es false.
- showJumpToPageDropdown : especifica si mostrar un menú desplegable para navegar a cualquier página. Es del tipo de dato booleano, el valor por defecto es false.
- showPageLinks : especifica si mostrar enlaces de página. Es del tipo de datos booleano, el valor predeterminado es verdadero.
- lazy : especifica si los datos se cargan e interactúan de manera perezosa. Es del tipo de dato booleano, el valor por defecto es false.
- emptyMessage : Es el texto a mostrar cuando no hay datos, es de tipo string de datos.
- style : Es el estilo Inline del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
- styleClass : Es la clase Style del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
- trackBy : es la función para optimizar las operaciones dom delegando a ngForTrackBy, el algoritmo predeterminado verifica la identidad del objeto. Es de tipo de datos de función, el valor por defecto es nulo.
- filterBy : es la lista de campos separados por comas en el gráfico de objetos para buscar. Es de tipo de datos de string, el valor predeterminado es nulo.
- filterLocale : es la configuración regional que se utilizará en el filtrado. Es de tipo de datos de string, el valor predeterminado es indefinido.
- cargando : Muestra un cargador para indicar que la carga de datos está en progreso. Es del tipo de dato booleano, el valor por defecto es false.
- loadingIcon : Es el ícono que se muestra mientras indica que la carga de datos está en progreso. Es de tipo de datos de string, el valor predeterminado es pi pi-spinner.
- first : es el índice de la primera fila que se mostrará, es de tipo de datos numérico, el valor predeterminado es 0.
Eventos:
- onLazyLoad : es una devolución de llamada que se activa cuando la paginación, la clasificación o el filtrado ocurren en modo diferido.
- onPage : es una devolución de llamada que se activa cuando se produce la paginación.
- onSort : es una devolución de llamada que se activa cuando se produce la clasificación.
- onChangeLayout : es una devolución de llamada que se activa al cambiar el diseño.
Estilo:
- p-dataview: Es un elemento contenedor de estilo.
- p-dataview-list: es un elemento contenedor de estilo en el diseño de la lista.
- p-dataview-grid: es un elemento contenedor de estilo en el diseño de la cuadrícula.
- p-dataview-header: es una sección de encabezado de estilo.
- p-dataview-footer: es una sección de pie de página de estilo.
- p-dataview-content: es un contenedor de estilo de elementos.
- p-dataview-emptymessage: es un elemento de estilo de mensaje vacío.
Creación de aplicaciones angulares e instalación de módulos:
Paso 1 : Cree una aplicación Angular usando el siguiente comando.
ng new appname
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.
cd appname
Paso 3 : Instale PrimeNG en su directorio dado.
npm install primeng --save npm install primeicons --save
Estructura del proyecto: Tendrá el siguiente aspecto:
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente dataView.
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 {}
Producción:
Ejemplo 2: En este ejemplo, usaremos opciones de búsqueda con el componente dataView y con un diseño diferente de 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 {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/dataview