Paginación en Angular

Es una forma de estructurar el contenido, agrupándolo por una cantidad de elementos donde hay una numeración ordinal de páginas, que se encuentra en la parte superior o inferior de las páginas del sitio web y se ve de la siguiente forma:

Instalamos en nuestro proyecto las librerias de paginacion:

npm install ngx-pagination

En app.module.ts

import {NgxPaginationModule} from 'ngx-pagination'

 y lo incluimos en los imports.

 

En app.module.ts declaramos una lista de  usuarios en formato json,  una variable llamada pagina de tipo number

app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

   usuarios = [

     {

       dni: '12356A',

       nombre: ' Juan',

       primerApellido: 'Garcia'

     },

     {

      dni: '12356B',

      nombre: ' Antonio',

      primerApellido: 'Lopez'

    },

    {

      dni: '12356C',

      nombre: 'Luis',

      primerApellido: 'Lopez'

    },

   ];

   pagina: number;

    constructor() {

   }

}

En app.component.html y añadimos a nuestra directiva ngFor un pipe y el siguiente código:

paginate: { itemsPerPage: 2, currentPage: pagina} .

Donde itemsPerPage estableceremos cuantos usuarios queremos por página, por ejemplo 2

Después añadimos los botones de navegación que nos permitan navegar para ver los distintos usuarios.

Añadiendo el siguiente código:

<pagination-controls 

(pageChange)="pagina = $event" 

previousLabel="Anterior" 

nextLabel="Siguiente">

</pagination-controls>

 

app.module.html:

<th>Dni</th>

<th>Nombre</th>

<th>PrimerApellido</th>

<tr *ngFor="let usuario of usuarios  | paginate : {itemsPerPage : 2, currentPage: pagina }" >

    <td> {{usuario.dni}}</td>

    <td> {{usuario.nombre}}</td>

    <td> {{usuario.primerApellido}}</td>

</tr>

<pagination-controls 

(pageChange)="pagina = $event" 

previousLabel="Anterior" 

nextLabel="Siguiente">

</pagination-controls>

Configurar paginator de angular Material

En app.module.ts hacemos un import {MatPaginatorModule} from '@angular/material/paginator'  y lo introducimos en los imports.

Instalamos el paquete

ng add @angular/material

 

Importamos los siguientes modulos:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSliderModule } from '@angular/material/slider';

 

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import {MatPaginatorModule} from '@angular/material/paginator';

 

Añadimos CUSTOM_ELEMENTS_SCHEMA  al app.module.ts:

schemas: [CUSTOM_ELEMENTS_SCHEMA]

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [BrowserModule, BrowserAnimationsModule, MatSliderModule, FormsModule, MatPaginatorModule],

  providers: [],

  bootstrap: [AppComponent],

  schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

 

Nos vamos a la pagina:

https://material.angular.io

Despues vamos a la sección de componentes y buscamos paginator, nos vamos a examples y nos vamos a ver codigo en <>

 

 

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSliderModule } from '@angular/material/slider';

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import {FormsModule} from '@angular/forms';

import {MatPaginatorModule} from '@angular/material/paginator';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [BrowserModule, BrowserAnimationsModule, MatSliderModule, FormsModule, MatPaginatorModule],

  providers: [],

  bootstrap: [AppComponent],

  schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

export class AppModule { }

app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent { 

}

app.component.html:

<mat-paginator [length]="100"

              [pageSize]="10"

              [pageSizeOptions]="[5, 10, 25, 100]">

</mat-paginator>

 

Como configurar paginator de angular Material

 

Instalamos el paquete:

ng add @angular/material

Importamos los siguientes modulos:

import {MatPaginatorModule} from '@angular/material/paginator';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSliderModule } from '@angular/material/slider';

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import {MatPaginatorModule} from '@angular/material/paginator';

 

Añadimos CUSTOM_ELEMENTS_SCHEMA  a app.module.ts en declarations:

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Y en imports las importaciones de los modulos, quedando de la siguiente manera:

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [BrowserModule, BrowserAnimationsModule, MatSliderModule, FormsModule, MatPaginatorModule],

  providers: [],

  bootstrap: [AppComponent],

  schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

Nos vamos a la pagina:

https://material.angular.io

Despues vamos a la sección de componentes y buscamos paginator, nos vamos a examples y nos vamos a ver codigo en <>

 

En app.component.html insertamos el siguiente codigo:

<mat-paginator [length]="100"

              [pageSize]="10"

              [pageSizeOptions]="[5, 10, 25, 100]">

</mat-paginator>