I have an Angular 17 frontend with PrimeNG and a Spring Boot Backend which returns objects of type StudentResponseDto in a Page.

My problem is that the view on site 1 just displays all elements which are returned from the backend.

But per default I want to display 12 Elements on Site 1, 12 on Site 2 and so on.
Later I want that the user can select on a drop down how many elements he wants to have displayed per page.

I have tried different options like [lazy]="true" but have had no success so far.

This is my Component

export class StudentsDashboardComponent {

  Students: StudentResponseDto[] = [];
  totalPages = 0;
  pageSize = 12;
  currentPage = 0;

  constructor(private apiService: ApiService) {
  }

  ngOnInit() {
    this.loadStudents(0, this.pageSize);
  }

  loadStudents(page: number, size: number): void {
    this.apiService.getStudents(page, size).subscribe({
      next: (data) => {
        this.Students = data.content.map(student => {
          const parsedDate = new Date(student.birthDate);
          return {
            ...student,
            birthDate: parsedDate
          };
        });
        this.totalPages = data.page.totalPages
        this.currentPage = data.page.number;
      },
      error: (error) => console.error('Error loading Students:', error)
    });
  }
}

and here my shortened view

<div class="grid">
  <div class="col-12">
    <div class="card">
      <div class="flex justify-content-between flex-wrap">
        <h5 class="flex">Student View</h5>
      </div>

      <p-dataView #dv [paginator]="true" [rows]="12" [sortField]="sortField" [sortOrder]="sortOrder" [value]="students"
                  filterBy="name" layout="grid">
        <ng-template pTemplate="header">
          <div class="flex flex-column md:flex-row md:justify-content-between gap-2">
            <p-dropdown (onChange)="onSortChange($event)" [options]="sortOptions"
                        placeholder="Sort By Price"></p-dropdown>
            <span class="p-input-icon-left">
                            <i class="pi pi-search"></i>
                            <input (input)="onFilter(dv, $event)" pInputText placeholder="Search by Name" type="search">
                        </span>
            <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
          </div>
        </ng-template>

        <ng-template pTemplate="gridItem">
          <div class="grid grid-nogutter">
            <div *ngFor="let student of students" class="col-12 md:col-4">
              <div class="card m-3 surface-border">
                <div class="flex ">
                  <div class="flex mt-1">
                    <div
                      class="flex-initial flex-grow-1 flex-column flex align-items-center justify-content-center mr-5 mt-3 border-round">
                      <div>{{ student.firstName + ' ' + student.lastName }}</div>
                    </div>
                    <div class="flex-initial flex align-items-end justify-content-end border-round ">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      </p-dataView>
    </div>
  </div>
</div>

Does anyone have an idea what I need to change please to make that running?

Thanks in advance!