גולמי

ב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>