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>