How to set the limit of received elements from a JSON file in Angular 8?

Question

JavaScript

There is a patients.json file containing patient data (about 1000 people) in this form:

{
    "id": 1,
    "name": "Denis",
    "lastName": "Smith",
    "age": 29,
    "date": "Monday, January 10, 2015"
  },
  {
    "id": 2,
    "name": "Vasiliy",
    "lastName": "Johnson",
    "age": 25,
    "date": "Friday, March 3, 2016"
  }

Loading data from a file is carried out inside the service:

getData(): Observable<Patient[]> {
    return this.http.get<Patient[]>('/assets/patients.json');
}

Next, the service is connected to the component and the getData() method is called in the component itself

this.patientsService.getData().subscribe((data) => {
    console.log(data);
});

I want to implement such functionality: when the page is loaded, a request is made to the file and only the first 5 people are displayed. Then, by clicking on the "Load more" button, the next 10 people are loaded, etc.
It is necessary that when loading data from a file, the entire file is not loaded, but only part of it (5 people).
Question : how to process data when loading data and stop loading at the right time?

Answer 1

The backend should be paginated. In this case, trying to do pagination on the front is stupidly pointless, since this is a static file.