Material angular 7 – Paginador

La<mat-paginator>, una Directiva Angular, se utiliza para mostrar un navegador con información paginada.

En este capítulo, mostraremos la configuración necesaria para mostrar un paginador usando Material Angular.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatPaginatorModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ {AgModule
   declaraciones:[AppComponent],
   importaciones:[BrowserModule,BrowserAnimationsModule,MatPaginatorModule,FormsModule,ReactiveFormsModule],
   proveedores:[],
   bootstrap:[AppComponent]})exportclassAppModule{}

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

[length] ="100"
   [páginaTamaño] ="10"
   [Opciones de tamaño de página] ="[5, 10, 25, 100]"
   (página) ="pageEvent = $event"> *ngIf="pageEvent">
Evento de cambio de página< /h5> Tamaño de página: {{pageEvent.length}}Tamaño de página: {{pageEvent.pageSize}}Indice de página: {{pageEvent.pageIndex}}

Resultado

Verifique el resultado.

Detalles

  • Aquí, hemos creado un paginador usando mat-paginator y manejamos su evento de cambio.