libs/employee-display/src/employee-list-table-view/employee-list-table-view.component.ts
| selector | employee-list-table-view |
| templateUrl | ./employee-list-table-view.component.html |
Methods |
Inputs |
Outputs |
list
|
Type: |
selectedId
|
Type: |
selectId
|
$event type: EventEmitter
|
| noop | ||||||
noop(e: MouseEvent)
|
||||||
|
Parameters :
Returns :
void
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { IEmployeeListing } from '@enterprise-example/app-schema';
@Component({
selector: 'employee-list-table-view',
templateUrl: './employee-list-table-view.component.html'
})
export class EmployeeListTableViewComponent {
@Input() list: IEmployeeListing[];
@Input() selectedId: number;
@Output() selectId = new EventEmitter<number>();
noop(e: MouseEvent) {
e.preventDefault();
}
}
<table class="bordered unselectable">
<tr *ngFor="let employee of list"
(click)="selectId.next(employee.id)"
[style.background-color]="employee.id == selectedId ? 'yellow' : ''">
<td>
<a href="#" (click)="noop($event)">{{employee.first_name}}</a>
</td>
<td>
<a href="#" (click)="noop($event)">{{employee.last_name}}</a>
</td>
<td>
<a href="#" (click)="noop($event)">{{employee.email}}</a>
</td>
</tr>
</table>
<style>
tr { cursor: pointer; cursor: hand; }
</style>