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

Question

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

pagination.component.html:

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" ></mat-paginator>

pagination.component.ts:

import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { MatPaginator } from '@angular/material';
import { MissionService } from '../mission.service';

@Component({
selector: 'app-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@Output() myPageSize: any;
// tslint:disable-next-line:use-life-cycle-interface
   constructor() {}
   ngOnInit() {
   }
   // tslint:disable-next-line:use-life-cycle-interface
   ngAfterViewInit() {
     this.paginator.page.subscribe(
         (event: any[]) =>
         this.myPageSize = event.pageSize ); }

 }

студенты-table.component.html:

    <div class="example-header">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>
    </div>
    <div class="example-container mat-elevation-z8">
      <mat-table [dataSource]="dataSource" matSort>
        <!-- ID Column -->
        <ng-container  matColumnDef="ID">
          <mat-header-cell *matHeaderCellDef mat-sort-header>ID </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.ID}} </mat-cell>
        </ng-container>
        <!-- firstName Column -->
        <ng-container matColumnDef="firstName">
          <mat-header-cell *matHeaderCellDef mat-sort-header> firstName </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.firstName}} </mat-cell>
        </ng-container>
        <!-- lastName Column -->
        <ng-container matColumnDef="lastName">
          <mat-header-cell *matHeaderCellDef mat-sort-header> lastName </mat-header-cell>
          <mat-cell *matCellDef="let row" | slice:0:10; let i=index""> {{row.lastName}} </mat-cell>
        </ng-container>
        <!-- mathMark Column -->
        <ng-container matColumnDef="mathMark">
          <mat-header-cell *matHeaderCellDef mat-sort-header> mathMark </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.mathMark}} </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;">
        </mat-row>
      </mat-table>
    </div>
    <li>
      {{paginator.myPageSize}}
    </li>
    <app-pagination #paginator>  </app-pagination>

student-table.component.ts:

    import {Component, ViewChild} from '@angular/core';
    import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
    import {Student} from '../student';
    import {STUDENTS} from '../students-list';
    import { MissionService } from '../mission.service';
    @Component({
      // tslint:disable-next-line:component-selector
      selector: 'students-table',
      styleUrls: ['students-table.component.scss'],
      templateUrl: 'students-table.component.html',
    })
    // tslint:disable-next-line:component-class-suffix
    export class StudentsTable {
      displayedColumns = ['ID', 'firstName', 'lastName', 'mathMark'];
      dataSource: MatTableDataSource<Student>;

      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;
      constructor() {
        const students = STUDENTS;
          this.dataSource = new MatTableDataSource(students);
      }
      // tslint:disable-next-line:use-life-cycle-interface
      ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      }

      applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
        this.dataSource.filter = filterValue;
      }
    }

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