4. Simple table with students data and integration of pagination component

app.component.html

<div class="container-fluid">
  <!-- Starts table -->
  <div class="row">
    <div class="col-md-12">
      <h3>Students</h3>
      <div class="card">
        <div class="pt-0 card-body">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th class="bt-none">Name</th>
                <th class="bt-none">Email</th>
                <th class="bt-none">Department</th>
              </tr>
            </thead>
            <tbody>
              <tr
                *ngIf="!students.length && !isLoadingStudents"
                class="text-center"
              >
                <td colSpan="3">No students</td>
              </tr>
              <tr *ngIf="isLoadingStudents" class="text-center">
                <td colSpan="3">
                  <span>Loading...</span>
                </td>
              </tr>
              <tr *ngFor="let student of students">
                <td>{{ student.name }}</td>
                <td>{{ student.email }}</td>
                <td>{{ student.department }}</td>
              </tr>
            </tbody>
          </table>

          <!-- PAGINATION COMPONENT START-->
          <app-pagination
            (responseData)="students = $event"
            (loading)="isLoadingStudents = $event"
            [apiRoute]="'http://localhost:4000/api/students'"
            [recordsPerPage]="recordsPerPage"
          >
          </app-pagination>
          <!-- PAGINATION COMPONENT END-->
        </div>
      </div>
    </div>
  </div>
  <!-- Ends table -->
</div>