Как сделать пагинацию в Angular

Добавление модуля пагинации Ngx

Теперь мы собираемся установить ngx-pagination в нашем приложении angualr.

npm install ngx-pagination

Обновление класс модуля приложения

Откройте файл app/app.module.ts , импортируйте пакеты NgxPaginationModule и HttpClientModule, а также внедрите их в массив imports.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxPaginationModule } from 'ngx-pagination';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgxPaginationModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Настройка Angular Service

Нам нужен сервис, в котором мы можем написать код для вызова API, который получает данные для нашего серверного компонента разбивки на страницы angular.

ng g s services/students

Как только мы выполнили указанную выше команду, была создана папка services и файл student.service.ts . Откройте файл и добавьте в него предложенный код.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root',
})
export class StudentsService {
  private url = 'https://reqres.in/api/users';
  constructor(private httpClient: HttpClient) {}
  getStudents(page: number) {
    return this.httpClient.get(this.url + '?page=' + page);
  }
}

Реализация пагинации в Angular

Перейдите к файлу app.component.ts , импортируйте StudentService, внедрите его в метод конструктора, создайте функцию, вызовите метод getStudents() и установите нумерацию страниц.

import { Component, OnInit } from '@angular/core';
import { StudentsService } from './services/students.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  Students: any;
  allStudents: number = 0;
  pagination: number = 1;
  constructor(private studentsService: StudentsService) {}
  ngOnInit() {
    this.fetchStudents();
    console.log(this.fetchStudents());
  }
  fetchStudents() {
    this.studentsService.getStudents(this.pagination).subscribe((res: any) => {
      this.Students = res.data;
      this.allStudents = res.total;
      console.log(res.total);
    });
  }
  renderPage(event: number) {
    this.pagination = event;
    this.fetchStudents();
  }
}

Далее нам нужно найти файл app.component.html в папке src/ , затем вставить в файл указанный код и создать представление для элементов таблицы и пагинации.

<div class="container mt-5">
  <h2 class="mb-3 text-center">Angular 16 Server Side Pagination Example</h2>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">First name</th>
        <th scope="col">Last name</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="
          let student of Students
            | paginate
              : {
                  itemsPerPage: 6,
                  currentPage: pagination,
                  totalItems: allStudents
                }
        "
      >
        <td scope="row">{{ student.id }}</td>
        <td>{{ student.first_name }}</td>
        <td>{{ student.last_name }}</td>
        <td>{{ student.email }}</td>
      </tr>
    </tbody>
  </table>
  <div class="d-flex justify-content-center">
    <pagination-controls
      (pageChange)="renderPage($event)"
    ></pagination-controls>
  </div>
</div>

Запуск сервера разработки

Теперь мы собираемся протестировать приложение angular, обязательно запустите приложение angular и протестируйте приложение по следующему URL-адресу.

ng serve --open

http://localhost:4200

Заключение

В этом руководстве по примерам разбивки на страницы в Angular мы узнали, как создать модуль разбиения на страницы и отобразить данные с разбивкой на страницы с помощью таблицы в приложении Angular.