Stack Overflow en español Asked by user184448 on January 4, 2022
Quiero utilizar este componente
<mat-paginator [length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
Esto es el codigo que tengo en la vista de html
<mat-list role="list">
<mat-list-item role="listitem">numero 1</mat-list-item>
<mat-list-item role="listitem">numero 2</mat-list-item>
<mat-list-item role="listitem">numero 3</mat-list-item>
</mat-list>
y esto en es lo que tengo en el archivo ts
import {Component} from '@angular/core';
/**
* @title Basic list
*/
@Component({
selector: 'list-overview-example',
templateUrl: 'list-overview-example.html',
})
export class ListOverviewExample {}
Solo necesitas usar el output (page)
del componente para obtener los datos de paginacion.
<mat-paginator
[length]="listaCompleta.length"
[pageSize]="cantidadPorPagina"
(page)='paginar($event)'
[pageSizeOptions]="opcionesDeCantidades">
</mat-paginator>
Y despues trabajas estos datos en tu logica:
paginar(paginacion: any) {
let actual = paginacion.pageIndex * paginacion.pageSize
this.listaParaMostrar = this.listaCompleta.slice(
actual,
actual + paginacion.pageSize
);
}
Te dejo un ejemplo funcional aqui
Para mantener los botones de ultima y primera pagina solo agrega showFirstLastButtons
en el paginador.
El ejemplo esta actualizado.
Answered by Legna on January 4, 2022
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP