como paginar una list en angular
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 {}
One Answer
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
Edición
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
Add your own answers!
Ask a Question
Get help from others!
Recent Answers
- Joshua Engel on Why fry rice before boiling?
- Peter Machado on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?