Curso Loopback 3, Bootstrap 4 & Angular 6 (Paginación con ngx-pagination) #23


https://i.ytimg.com/vi/NUmLaVcx1HI/hqdefault.jpg



Lista completa: 🔗 https://youtube.com/playlist?list=PL_9MDdjVuFjGJm9hBCwIb2nkLYIf83o2A
Paginación con ngx-pagination en Angular 6

En esta lección vamos a añadir paginación en nuestra lista de libro.
Vamos a usar la directiva ngx-pagination con Angular 6.

Recuerda que a lo largo de este curso vas a aprender como hacer una aplicación en Angular 6, Bootstrap 4 & Loopback.io

Al final TODO el curso habrás aprendido:
– Ha trabajar con rutas en Angular 6
– Operaciones CRUD en Angular 6
– Login y registro de usuarios
– Bootstrap 4
– Loopback API Rest

Código del proyecto: https://github.com/bezael/loopback3_angular6_bootstrap4

Facebook: https://www.facebook.com/dominicodee/

Twitter : https://twitter.com/domini_code

Suscribete al canal: https://www.youtube.com/c/DominiCode

Tutorial Angular 6 español CRUD Firebase firestone:


Original source

43 thoughts on “Curso Loopback 3, Bootstrap 4 & Angular 6 (Paginación con ngx-pagination) #23

  • November 28, 2021 at 18:35
    Permalink

    Tengo una duda, ¿Si hay demasiada data es igual de confiable? he visto en la documentación que dice que se puede usar una variable totalItems: que es el length de la data, pero igual carga toda la data haciendo pesada la página
    Gracias por tus respuestas.

  • November 28, 2021 at 18:35
    Permalink

    Creía que hacer una paginacion era algo super complicado, pero veo que con angular nos ahorramos muchísimo todo y en cuestión de segundos tenemos una maravillosa paginacion, eres un grande y muy buena la explicación.

  • November 28, 2021 at 18:35
    Permalink

    Excelente video Domini code, tengo una pregunta como se puede paginar los datos y hacerle una busqueda, si desde el backed esta paginado, imaginate que sean 10,000 registro y lo estoy paginando y ademas quiero filtrarlos desde el frontend, Gracias

  • November 28, 2021 at 18:35
    Permalink

    para los que tengan un buscador en tiempo real por búsqueda de nombre puede que no les muestre el producto si ya no están en la pagina 1, entonces lo que tienen que hacer es cuando presione una tecla setear el pageActual a 1 y funcionara 🙂 PD: muy buen video, funciona en angular 8.3 tambien

  • November 28, 2021 at 18:35
    Permalink

    Genial! hace mucho estaba intentando que la parte de paginate me funcionara y mi error era por lo mismo que te paso a ti, el let i=index se pone al final… GRACIAS <3

  • November 28, 2021 at 18:35
    Permalink

    funciona perfecto el ;let i=index lo pones al final del nFor y ya funciona incluido que en mi caso pone una columna con el contador de registro.

  • November 28, 2021 at 18:35
    Permalink

    Funciona con angular 8 tambien, solo que si tienen un input para buscar con pipes, debes agregar en el input con el que haces la busqueda (focus)="currentPage = 1", esto para que no se arruine la busqueda al agregar la paginacion, es muy facil deducirlo jaja pero igual dejo mi pequeño aporte.

  • November 28, 2021 at 18:35
    Permalink

    Todo perfecto, pero ¿ se pueden agregar estilos al paginador?
    Lo quiero cambiar de posición y cambiarle el texto a Español. Hay alguna forma de hacerlo.

  • November 28, 2021 at 18:35
    Permalink

    @Domini Code tengo la siguiente consulta si bien se puede utilizar la paginacion que ngx-pagination, bien se podria reemplazar por un datatable o esta forma es mejor ?. saludos y exito.

  • November 28, 2021 at 18:35
    Permalink

    A mi no me funciono una cosa, el index as i eso tuve que quitarlo, y ademas lo relacionado para el indez y funciona perfectamente. Si a alguien mas le pasa que pruebe a mirar por ahi 😉

  • November 28, 2021 at 18:35
    Permalink

    Buenas Master. Todo va bien en el curso… me a ayudado bastante. Estoy tratando de hacer lo mismo con material design, pero veo que las tablas y la paginacion es muy diferente y no he podido. Los ejemplos que hay son con los datos en duro, pero nada con datos consumidos desde el servidor. Me funciona con los datos en duro, pero a la hora de cargar los datos desde el servidor, no muestra nada. Aca le dejo mi codigo por si acaso. Gracias por sus videos.

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

    // Servicio del libro.
    import { DataApiService } from 'src/app/servicios/data-api.service';

    // Importacion del modelo.
    import { BookInterface } from '../../models/libros-interface';

    import {MatPaginator, MatTableDataSource} from '@angular/material';

    @Component({
    selector: 'app-list-books',
    templateUrl: './list-books.component.html',
    styleUrls: ['./list-books.component.css']
    })
    export class ListBooksComponent implements OnInit {

    private books: BookInterface[];

    @ViewChild(MatPaginator) paginator: MatPaginator;

    constructor(private _dataApiSer: DataApiService ) { }

    ngOnInit() {
    this.getListBook();
    this.dataSource.paginator = this.paginator;
    }

    displayedColumns:string[] = ['titulo', 'autor', 'idioma']; // Encabezados de la tabla.
    dataSource = new MatTableDataSource<BookInterface>(this.books); // Esta variable no muestra datos.

    // Devuelve los libros.
    public getListBook(): void{
    this._dataApiSer.
    getAllBooks()
    .subscribe(
    //( books: BookInterface ) => (this.books = books)
    data => this.books = data
    );

    }

Leave a Reply