¿Como hacer paginación en Angular, obteniendo datos paginados desde el backend (node)

Question

Como escribi en la pregunta, ya tengo mis datos paginados desde el backend, el problema es a la hora de iterar la cantidad de paginas en angular, quiero una paginacion que vaya de 5 en 5, 1,2,3,4,5… y que cuando llegue al 3 me muestre de el 3 en adelante, es decir 3,4,5,6,7. o algo similar a eso..

este es el controlador de backend (node)

 NoticiaController.VerPaginate = async (req, res, next) => {
     let perPage = 3;
     let page = req.params.page || 1;

   await  Noticia
     .find({}).sort({createdAt: -1})
     .skip((perPage * page) - perPage)
     .limit(perPage)
     .exec((err,noticias) => {
         Noticia.countDocuments((err,conteo) =>{
             if(err) return next(err); 
             res.json({
                 noticias,
                 current:page,
                 pages:Math.ceil(conteo/perPage),
             });
         })
     })

Este es mi component.ts

 
 
 import { Component, OnInit } from '@angular/core';
 import {PhotoService} from '../../services/photo.service';
 import {ActivatedRoute,Router} from '@angular/router';
 
 @Component({
   selector: 'app-photo-list',
   templateUrl: './photo-list.component.html',
   styleUrls: ['./photo-list.component.css']
 })
 
 export class PhotoListComponent implements OnInit {
   
 
 
   photos = [];
   page:number;
   pagesTolales:number;
   pagecAtual:number;
 
   constructor(
     private photoService:PhotoService,
      private router:Router,
      private activateRoute:ActivatedRoute,
     
     ) {
 
     }
 
   ngOnInit() {
     this.activateRoute.params.subscribe(params => {
       this.page = params['page'];
     this.photoService.getPhotos(this.page)
     .subscribe(
       res => {
         
         this.photos = res['noticias'];
         this.pagesTolales = res['pages'];
         this.pagecAtual = res['current'];
        
       },
       err => console.log(err),
       )
   }) 
 }
 

   selectedCard(id:string){
     this.router.navigate(['/photo',id]);
   }
 
 }

Este es mi component.html, la cuestión es acá, miren la iteracion que hago en el *ngfor pero no puedo hacer que vaya de 5 en 5, es decir si tengo 1000 resultados de paginacion , esos mil resultados se mostraran….

 
 <div class="row">
     <div class="col-md-4 p-4" *ngFor="let photo of photos">
         <div class="card card-photo" (click)="selectedCard(photo._id)">
             <div class="card-header">
                 {{photo.title}}
             </div>
              <img [src]="'http://localhost:3000/uploads/' + photo.img" class="img-card-top w-100"> 
             <div class="card-body">
                 {{photo.descripcion}}
             </div>
         </div>
 
     </div>
 </div>
 
 
 <div class="row">
     <nav class="mx-auto">
         <ul class="pagination" >
             <div *ngFor="let item of [].constructor(pagesTolales);  let i = index">
             <li class="page-item">
                 <a class="btn btn-danger btn-sm mr-2" routerLink="/photos/{{i+1}}" routerLinkActive="btn-dark" >{{i+1}}</a>
             </li>
         </div>
         </ul>
     </nav>
  </div>

angular nodejs

¿Como hacer paginación en Angular, obteniendo datos paginados desde el backend (node)

Add your own answers!

Ask a Question