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>