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 Paginator 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 paginador: Se utiliza para mostrar contenido en formato paginado.
Propiedades:
- totalRecords : Es el número total de páginas de registros totales que se mostrarán. Es de tipo de dato numérico, el valor por defecto es 0.
- filas : es el conteo de datos para mostrar por página. Es de tipo de dato numérico, el valor por defecto es 0.
- first : Es el número relativo a cero de la primera fila que se mostrará. Es de tipo de dato numérico, el valor por defecto es 0.
- pageLinkSize : Establece el número de enlaces de página para mostrar. Es de tipo de dato numérico, el valor por defecto es 5.
- rowsPerPageOptions : es la array de valores enteros/objetos para mostrar dentro de las filas por menú desplegable de página. Es de tipo de datos de array, el valor predeterminado es nulo.
- estilo: Es un estilo en línea del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
- styleClass : Es la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
- alwaysShow : especifica si mostrarlo incluso si solo hay una página. Es de tipo de datos booleano, el valor predeterminado es verdadero.
- showFirstLastIcon : Muestra que los íconos se muestran en el paginador para ir a la primera y última página. Es de tipo de datos booleano, el valor predeterminado es verdadero.
- templateLeft : es la instancia de plantilla para inyectar en el lado izquierdo del paginador. Es del tipo de datos TemplateRef, el valor predeterminado es nulo.
- templateRight : es la instancia de plantilla para inyectar en el lado derecho del paginador. Es del tipo de datos TemplateRef, el valor predeterminado es nulo.
- dropdownItemTemplate : es la instancia de plantilla para inyectar en el elemento desplegable dentro del paginador. Es del tipo de datos TemplateRef, el valor predeterminado es nulo.
- dropdownAppendTo : es el elemento de destino para adjuntar la superposición desplegable. Puede aceptar cualquier tipo de datos y el valor predeterminado es nulo.
- dropdownScrollHeight : es la altura desplegable de la ventana gráfica en píxeles, se define una barra de desplazamiento si la altura de la lista supera este valor. Es de tipo de datos de string, el valor predeterminado es 200px.
- currentPageReportTemplate : es la plantilla del elemento de informe de la página actual. Es de tipo de datos de string, el valor predeterminado es ({currentPage} de {totalPages}).
- showCurrentPageReport : especifica si mostrar el informe de la página actual. Es de tipo de dato booleano, el valor por defecto es false.
- showJumpToPageDropdown : especifica si mostrar un menú desplegable para navegar a cualquier página. Es de tipo de dato booleano, el valor por defecto es false.
- showPageLinks : especifica si mostrar enlaces de página. Es de tipo de datos booleano, el valor predeterminado es verdadero.
Eventos:
- onPageChange: Es una devolución de llamada que se dispara cuando la página cambia en el elemento.
Estilo:
- p-paginator: Es el elemento Contenedor.
- p-paginator-first: Es el elemento de la primera página.
- p-paginator-prev: Es el elemento de la página anterior.
- p-paginator-pages: Es el contenedor de enlaces de página.
- p-paginator-page: Es el enlace de la página.
- p-paginator-next: Es el elemento de la página siguiente.
- p-paginator-last: Es el último elemento de la página.
- p-paginator-rpp-options: Es el menú desplegable de filas por página.
- p-paginator-page-options: Es el menú desplegable de salto por página.
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 ilustra cómo usar el componente Paginador. Hemos utilizado la propiedad fila y registro total que brindará la información sobre el recuento de datos que se representará por página y un número total de registros, respectivamente.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Paginator Component</h5> <p-paginator [rows]="1" [totalRecords]="15"></p-paginator>
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {}
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { PaginatorModule } from "primeng/paginator";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
PaginatorModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, usaremos la propiedad pageLinkSize en el componente paginador con el menú desplegable rowsPerPageOptions .
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Paginator Component</h5> <p-paginator [pageLinkSize]="10" [rows]="1" [totalRecords]="25" [rowsPerPageOptions]="[10,20,30]"> </p-paginator>
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {}
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { PaginatorModule } from "primeng/paginator";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
PaginatorModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/paginator