How to use Angular Material Paginator with a simple array of objects?

Question

I have checked every question in SO about how to use Angular Paginator with normal, not-material components. But somehow I struggle to understand how to do it correctly. I just have an array of objects and show them in my frontend like this:

this is my component.html:

<div class="container">
  <div class="image" *ngFor="let imageOrFile of imagesAndFiles">
    <dispo-einsatz-dokumente-gallery-image-item
      [image]="imageOrFile"
    ></dispo-einsatz-dokumente-gallery-image-item>
  </div>
</div>

<mat-paginator
  #paginator
  [pageSize]="5"
  [length]="9"
  [pageSizeOptions]="[2, 10, 20, 50, 100]"
></mat-paginator>

and my component.ts:

export class DokumenteGalleryComponent implements OnInit {
  @Input()
  imagesAndFiles: any[] = [];

  @ViewChild(MatPaginator, { static: true })
  paginator: MatPaginator;

  ngOnInit() {}
}

Now I just cant get my head around on how to connect the pagination with the cards from the picture above, with the array imagesAndFiles?

Can someone enlighten me how to use it correctly?