Untitled
unknown
plain_text
a year ago
4.8 kB
4
Indexable
<!-- <mat-toolbar color="primary"> <span>CRUD Application</span> <span class="example-spacer"></span> <button mat-raised-button (click)="openAddEditEmpForm()"> ADD EMPLOYEE </button> </mat-toolbar> --> <!-- <header> <mat-toolbar color="primary"> <span>CRUD Application</span> <span class="example-spacer"></span> <button mat-raised-button routerLink="/"> EMPLOYEE LIST </button> <button mat-raised-button routerLink="/create-employee"> ADD EMPLOYEE </button> </mat-toolbar> </header> --> <main> <router-outlet></router-outlet> <div class="main-body"> <mat-form-field> <mat-label>Search</mat-label> <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> </mat-form-field> <mat-form-field> <mat-label>Filter by Company</mat-label> <mat-select [(ngModel)]="selectedCompany" (selectionChange)="applyCompanyFilter()"> <mat-option *ngFor="let company of uniqueCompanies" [value]="company"> {{ company }} </mat-option> </mat-select> </mat-form-field> <div class="table-container"> <table mat-table [dataSource]="dataSource" matSort> <!-- ID Column--> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th> <td mat-cell *matCellDef="let row">{{row.id}}</td> </ng-container> <!-- First Name Column--> <ng-container matColumnDef="firstName"> <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th> <td mat-cell *matCellDef="let row">{{row.firstName}}</td> </ng-container> <!-- last name Column--> <ng-container matColumnDef="lastName"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th> <td mat-cell *matCellDef="let row">{{row.lastName}}</td> </ng-container> <!-- email Column--> <ng-container matColumnDef="email"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th> <td mat-cell *matCellDef="let row">{{row.email}}</td> </ng-container> <!-- date of birth Column--> <ng-container matColumnDef="dob"> <th mat-header-cell *matHeaderCellDef mat-sort-header> dob </th> <td mat-cell *matCellDef="let row">{{row.dob | date }}</td> </ng-container> <!-- gender Column--> <ng-container matColumnDef="gender"> <th mat-header-cell *matHeaderCellDef mat-sort-header> gender </th> <td mat-cell *matCellDef="let row">{{row.gender}}</td> </ng-container> <!-- education Column--> <ng-container matColumnDef="education"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Education </th> <td mat-cell *matCellDef="let row">{{row.education}}</td> </ng-container> <!-- company Column--> <ng-container matColumnDef="company"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Company </th> <td mat-cell *matCellDef="let row">{{row.company}}</td> </ng-container> <!-- experience Column--> <ng-container matColumnDef="experience"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Experience </th> <td mat-cell *matCellDef="let row">{{row.experience}}</td> </ng-container> <!-- package Column--> <ng-container matColumnDef="package"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Package </th> <td mat-cell *matCellDef="let row">{{row.package | number}} VND</td> </ng-container> <ng-container matColumnDef="action"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th> <td mat-cell *matCellDef="let row"> <button mat-icon-button color="primary" (click)="openEditForm(row)"> <mat-icon>edit</mat-icon> </button> <button mat-icon-button color="warn" (click)="deleteEmployee(row.id)"> <mat-icon>delete</mat-icon> </button> </td> </ng-container> <tr class="mat-row" *matNoDataRow> <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td> </tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-paginator [pageSizeOptions]="[5,10,25,100]" aria-label="Select page of users"></mat-paginator> </div> </div> </main> <footer> <!-- Đặt phần footer cố định ở đây --> </footer>
Editor is loading...
Leave a Comment