خام

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>