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.