EmployeeListComponent
는 직원 목록과 부서 이름을 입력으로 허용합니다. 사용자가 직원을 삭제하거나 추가하려고 하면 구성요소가 해당 출력을 트리거합니다. 이 구성요소는 비즈니스 계산을 구현하는 calculate
메서드도 정의합니다.
다음은 EmployeeListComponent
의 템플릿입니다.
<h1 title="Department">{{ department }}</h1>
<mat-form-field>
<input placeholder="Enter name here" matinput="" type="text" [(ngmodel)]="label" (keydown)="handleKey($event)">
</mat-form-field>
<mat-list>
<mat-list-item *ngfor="let item of data">
<h3 matline="" title="Name">
{{ item.label }}
</h3>
<md-chip title="Score" class="mat-chip mat-primary mat-chip-selected" color="primary" selected="true">
{{ calculate(item.num) }}
</md-chip>
</mat-list-item>
</mat-list>