employee.component.html

//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).               
<div class="card" >
        <div class="card-header card-primary" [class.card-danger]="employee.isAllPending" 
             [class.card-success]="employee.isAllCompleted" 
             style="color:#ffffff !important;">
            <a *ngIf="!employee.isShowCourses" (click)="employee.isShowCourses = !employee.isShowCourses" 
               class="btn btn-sm btn-secondary">
                <i class="fa fa-chevron-up"></i>
            </a>
            <a *ngIf="employee.isShowCourses" (click)="employee.isShowCourses = !employee.isShowCourses" 
               class="btn btn-sm btn-secondary">
                <i class="fa fa-chevron-down"></i>
            </a>
            &nbsp;
            <span class="fa fa-user"></span> &nbsp;
            <b>{{employee.Name}}</b>&nbsp;

            <span class="hidden-sm-down">
                <small> {{employee.HireDate}}</small>
            </span>
            <div class="pull-right"> 
                <!--{{(employee.EmployeeCourses | filter:"{isComplete: true}").length}} /-->
                <span class="label label-warning label-pill">
                {{srNo + 1}}    <!--{{employee.EmployeeCourses.length}}-->
                </span>  &nbsp;
                <button (click)="employee.isToDelete = !employee.isToDelete" class="btn btn-sm  btn-secondary">
                    <span class="fa fa-remove "></span>
                </button>
            </div>
        </div>
        <!-- Table -->
            <div *ngIf="employee.isShowCourses" class="table-responsive" styel="width=100%">
                <div *ngIf="employee.isToDelete" class="card-block card-inverse card-warning text-xs-center" role="alert">
                        <button type="button" (click)="employee.isToDelete = !employee.isToDelete" 
                                class="close"><span aria-hidden="true">&times;</span></button>
                    <span class="fa fa-exclamation-triangle fa-2x text-danger"></span> &nbsp;
                        <strong>Warning:</strong>&nbsp;&nbsp;Are you sure to delete the employee - <b>{{employee.Name}}</b>
                        &nbsp;&nbsp;<button (click)="remove()" class="btn btn-sm btn-danger">
                            <strong> <span class="fa fa-check ">&nbsp;Yes</span></strong>
                        </button>
                        &nbsp;&nbsp;<button ng-click="employee.isToDelete = !employee.isToDelete" class="btn btn-sm btn-success">
                            <strong><span class="fa fa-remove ">&nbsp;No</span></strong>
                        </button>
                    </div>
                    <!--| orderBy:employee.order:employee.reverse" ng-class="Course.isComplete | courserowclass-->
                <div class="table-responsive">
                    <table class="table table-hover table-sm ">
                        <thead>
                            <tr class="table-inverse">
                                <th align="center" class="hidden-xs-down">
                                </th>
                                <th  class="text-xs-center">Status</th>
                                <th class="text-xs-center">Course Code</th>
                                <th  class="text-xs-center hidden-sm-down">Course Name</th>
                                <th class="text-xs-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="#Course of employee.EmployeeCourses; #idx = index" 
                                [class.table-danger]="!Course.isComplete"
                                [class.table-success]="Course.isComplete"
                                >
                                <td align="center" class="hidden-xs-down">
                                    <span class="label label-warning label-pill">
                                        {{idx + 1}}
                                    </span>
                                </td>
                                <td align="center">
                                    <i *ngIf="Course.isComplete" class="fa fa-check"></i>
                                    <i *ngIf="!Course.isComplete" class="fa fa-remove"></i>
                                </td>
                                <td align="center">
                                    <b>
                                        {{Course.Code}}
                                    </b>
                                </td>
                                <td class="hidden-sm-down">
                                    {{Course.Name}}
                                </td>
                                <td class="table-inverse text-xs-center">
                                    <button *ngIf="Course.isComplete" (click)="changeComplete(Course)" class="btn btn-sm btn-warning-outline"><span class="hidden-sm-down">mark </span>pending&nbsp;&nbsp;</button>
                                    <button *ngIf="!Course.isComplete"  (click)="changeComplete(Course)" class="btn btn-sm btn-success-outline"><span class="hidden-sm-down">mark </span>complete</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>  
            </div>
</div>