<app-header-breadcrumb></app-header-breadcrumb>
<p-panel header="Employees List">
    <div class="ui-g">
        <div class="ui-g-10 ui-sm-8"><label style="float:right;">Page Size:</label></div>
        <div class="ui-g-2 ui-sm-4"><input type="text" pInputText [(ngModel)]="pageSize"></div>
    </div>
    <p-table [value]="employees" [paginator]="true" [rows]="pageSize">
        <ng-template pTemplate="header">
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-employee>
            <tr>
                <td *ngFor="let col of columns">
                    <div *ngIf="col.field != 'Department'">{{employee[col.field]}}</div>
                    <div *ngIf="col.field == 'Department'"><a (click)="goToDepartmentDetails(employee.DepartmentId)">{{employee[col.field]}}</a></div>
                </td>
            </tr>
        </ng-template>
    </p-table>
</p-panel>