1

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 {}

introducir la descripción de la imagen aquí

1 respuesta 1

0

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.

5
  • Si funciona, pero desactiva los controles de siguiente e ir al ultimo registro como se ve en la imagen que agregue, la puedes revisar porfa
    – user184448
    el 27 jul. 2020 a las 17:01
  • @Arturo No aparece ninguna imagen.
    – Legna
    el 27 jul. 2020 a las 18:35
  • Es la ultima imagen
    – user184448
    el 27 jul. 2020 a las 20:15
  • @Arturo Edite la pregunta
    – Legna
    el 27 jul. 2020 a las 22:17
  • Si, ya esta bien, excelente
    – user184448
    el 28 jul. 2020 a las 0:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.