Skip to content

Instantly share code, notes, and snippets.

@navanathjadhav

navanathjadhav/app.component.html Secret

Last active Dec 26, 2020
Embed
What would you like to do?
4. Simple table with students data and integration of pagination component
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.