D4mations.com

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

[ad_1]
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

d4mer

,
, , , , , , , , , , , , , , , , , , , , , , , , ,

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

  10. 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.

  15. 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.

  21. 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

  24. 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.

  43. 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