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>
n
hastan + 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 desde8 a 15
o de16 a 23
...