0

quiero saber cómo se puede hacer una paginación en Angular, ya que tengo como 40 registros de la cual consumo de una rest api, quiero que el registro vaya en 8 en 8 registros para el botón del paginado sea del 1 al 5, y cuando agregue digamos 3 registros, va hacer 43 registros y que los botones para el paginado sean del 1 al 6 para mostrar los tres registros restantes.

Aquí esta mi código del componente ts:

import { Component, OnInit } from '@angular/core';
import {ArtistaserviceService} from './../../services/artistaservice.service';

@Component({
  selector: 'app-artista',
  templateUrl: './artista.component.html',
  styles: []
})
export class ArtistaComponent implements OnInit{
  
  artistas:any[] = [];

  constructor(private artistaS:ArtistaserviceService) {

   }

  ngOnInit(){
 this.artistaS.getArtistas()
 .subscribe(data =>{
   this.artistas = data;
   console.log(this.artistas);
 })
  }

 
}

y mi HTML:

<h1>Artista</h1>
<hr>

<div class="row">
<div class="col-md-12 text-right">
    <button class="btn btn-outline-primary" [routerLink]="['/arts','nuevo']" type="button" name="button">
   Agregar Nuevo
 </button>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
    <div class="table-responsive">
        <table class="table">
            <thead class="thead-inverse">

                <tr>
                    <th>#</th>
                    <th>Foto</th>
                    <th>Nombre</th>
                    <th>Año de nacimiento</th>
                    <th>Pais de origen</th>
                    <th class="text-rigth">Opciones</th>
                </tr>

            </thead>
            <tbody>

                <tr *ngFor="let art of artistas; let i = index">
                    <td>{{i+1}}</td>

                    <td>
                        <img src="../../../assets/img/fotoartista/{{art.fotoartista}}" class="img-thumb img-circle">
                    </td>

                    <td>{{art.nombreartista}}</td>
                    <td>{{art.anonacimiento}}</td>
                    <td>{{art.descripcion1}}</td>
                    <td class="text-rigth w120">

                        <button [routerLink]="['/arts','nose']" type="submit" class="btn btn-outline-success">
          Editar
          </button>

                        <button type="submit" class="btn btn-outline-danger">
          Eliminar
          </button>
                    </td>
                </tr>

            </tbody>

        </table>


    </div>
</div>
</div>

4
  • ¿Puedes cambiar tu backend para que te devuelva los resultados paginados? Esa sería la mejor manera de hacerlo.
    – akko
    Commented el 4 dic. 2018 a las 21:11
  • en que forma cambiaria mi backend
    – Alex
    Commented el 4 dic. 2018 a las 21:42
  • A tu endpoint podrías agregarle parámetros opcionales para te regrese los registros desde n hasta n + 8. Así cuando lo consumas con tu servicio de angular podrías declararle que quieres los registros desde la posición 0 y te regresa del 0 al 7. Así cada que cambies en el paginador le pides a tu servicio los 8 registros desde 8 a 15 o de 16 a 23...
    – akko
    Commented el 4 dic. 2018 a las 21:46
  • Quizá te interese usar ng-bootstrap Commented el 5 dic. 2018 a las 8:37

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.