Paginierung in Angular

Wir werden die Paginierung in Angular einführen und erfahren, welche Bibliothek am besten zur Implementierung der Paginierung geeignet ist und wie sie verwendet wird.

Paginierung in Angular

Wenn wir einen Datensatz mit mehr als 1000 oder 10.000 Elementen haben, können wir nicht alle Elemente auf einer Seite oder auf einmal anzeigen, da das Laden eines vollständigen Datensatzes viel Zeit und Speicherplatz in Anspruch nimmt. Der beste Weg, viele Datensätze anzuzeigen, ist die Verwendung von Paginierung in Angular.

Viele Bibliotheken können für die Paginierung in Angular verwendet werden. Aber in diesem Tutorial werden wir ngx-pagination verwenden, was einfach und unkompliziert zu implementieren ist.

Installation von ngx-pagination

Um eine ngx-pagination-Bibliothek zu installieren, müssen wir das Terminal in unserem Projekt öffnen und den folgenden Befehl ausführen.

# angular CLI
npm install ngx-pagination

Nachdem unsere Bibliothek installiert ist, importieren wir NgxPaginationModule aus ngx-pagination in die Datei app.module.ts. Wir werden auch NgxPaginationModule in @NgModule importieren.

Unser Code in app.module.ts sieht also wie folgt aus.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxPaginationModule } from 'ngx-pagination';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgxPaginationModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Wir erstellen ein Array mit einigen Daten und einer number-Variablen, die die Nummer der Seite speichert, auf der wir uns befinden. Unser Code in app.component.ts sieht wie folgt aus.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  pages: number = 1;
  dataset: any[] = ['1','2','3','4','5','6','7','8','9','10'];
}

Wir werden eine Ansicht erstellen, um unseren Datensatz anzuzeigen. Die app.component.html sieht wie folgt aus.

# angular
<div>
  <h2
    *ngFor="
      let data of dataset | paginate: { itemsPerPage: 2, currentPage: pages }
    "
  >
    {{ data }}
  </h2>
</div>

<pagination-controls (pageChange)="pages = $event"></pagination-controls>

Lassen Sie uns etwas CSS-Code schreiben, damit es in app.component.css besser aussieht.

# angular
div{
  text-align: center;
  padding: 10px;
}
h2{
  border: 1px solid black;
  padding: 10px;
}

Ausgabe:

Es wird so funktionieren.