Как сделать пагинатор в котором просто картинки?

Для создания пагинатора в Angular, в котором будут отображаться только картинки, мы можем использовать различные подходы. Рассмотрим один из них.

1. Создайте компонент пагинатора: для начала, создайте компонент пагинатора, например, ImagePaginator, с помощью Angular CLI команды:

ng generate component image-paginator

2. Определите входные данные: внутри компонента ImagePaginator определите входные данные, которые будут использоваться для отображения картинок. Для этого добавьте атрибут @Input() перед определением переменной:

@Input() images: string[];

3. Отображение картинок: в шаблоне компонента ImagePaginator определите разметку, которая будет отображать картинки из входных данных. Например:

<div *ngFor="let image of images">
  <img [src]="image">
</div>

4. Добавление пагинации: для добавления пагинации к пагинатору, вам понадобится организовать отображение только определенного числа картинок одновременно. В ImagePaginator создайте переменные, которые будут определять текущую страницу и количество картинок на странице:

currentPage: number = 1;
imagesPerPage: number = 4;

5. Отображение указанного числа картинок: обновите шаблон компонента ImagePaginator таким образом, чтобы отображалось только указанное число картинок с текущей страницы:

<div *ngFor="let image of getCurrentPageImages(); let i = index">
  <img [src]="image">
</div>

6. Реализация методов: добавьте методы в ImagePaginator для получения текущих отображаемых картинок и для переключения между страницами:

getCurrentPageImages(): string[] {
  const startIndex = (this.currentPage - 1) * this.imagesPerPage;
  const endIndex = startIndex + this.imagesPerPage;
  return this.images.slice(startIndex, endIndex);
}

goToPage(page: number): void {
  if (page >= 1 && page <= Math.ceil(this.images.length / this.imagesPerPage)) {
    this.currentPage = page;
  }
}

7. Использование компонента: теперь вы можете использовать компонент ImagePaginator на любой странице вашего приложения. Передайте ему массив картинок через входные данные images, и компонент будет отображать только указанное число картинок на каждой странице:

<app-image-paginator [images]="images"></app-image-paginator>

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