gistfile1.txt

<app-loading-spinner *ngIf="showSpinner"></app-loading-spinner>
<div *ngIf="!showSpinner" class="row clearfix" [@routerTransition]>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="header">
                <h4 class="modal-title">
                    <span>Students</span>
                </h4>
                <ul class="header-dropdown m-r--5">
                    <i class="fa fa-spin fa-spinner" *ngIf="isTableLoading"></i>
                    <li class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="material-icons">more_vert</i>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="javascript:void(0);" class=" waves-effect <waves-block></waves-block>" (click)="refresh();">
                                    <i class="material-icons">refresh</i> Refresh</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="body table-responsive" style="padding-bottom: 40px">
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Student ID</th>
                                <th>Gender</th>
                                <th>Class</th>
                                <th>Section</th>
                                <th>Guardian Name</th>
                                <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let student of students | paginate: { id: 'server', itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItems }">
                            <td class="trim">{{student.firstName}}</td>
                            <td class="trim">{{student.email}}</td>
                            <td class="trim">{{student.studentId}}</td>
                            <td class="trim">{{student.gender}}</td>
                            <td class="trim">{{student.class.name}}</td>
                            <td class="trim">{{student.section.name}}</td>
                            <td class="trim">{{student.guardianName}}</td>
                            <td class="dropdown">
                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        <i class="material-icons">menu</i>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        <li><a class="waves-effect waves-block" (click)="editStudent(student.studentKey)"><i class="material-icons">create</i>Edit</a></li>
                                        <li><a href="javascript:void(0);" class="waves-effect waves-block" (click)="deleteConfirmationDialog(student)"><i class="material-icons">delete_sweep</i>Delete</a></li>
                                        <li><a class="waves-effect waves-block" (click)="studentDetail(student.studentKey)"><i class="material-icons">details</i>View</a></li>
                                    </ul>
                                </td>
                        </tr>
                    </tbody>
                </table>
                <!-- <br> -->
                <button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right"
                    (click)="registerStudent()">
                    <i class="material-icons">add</i>
                </button>
            </div>
        </div>
    </div>
</div>