Компоненты

app.component.html
<contact-list
[contacts]="contacts"
(select)="selectContact($event)">
</contact-list>
contact-list.component.ts
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'contact-list',
templateUrl: './contact-list.component.html',
styleUrls: ['./contact-list.component.scss']
})
export class ContactListComponent {
selectedContact: any;
@Input() contacts;
@Output() select = new EventEmitter();
selectContact(contact) {
this.selectedContact = contact;
this.select.next(contact);
}
isSelected(contact): boolean {
return this.selectedContact == contact;
}
}
contact-list.component.html
<h2>Contacts</h2>
<ul>
<li
*ngFor="let contact of contacts"
(click)="selectContact(contact)"
[class.selected]="isSelected(contact)">
{{contact.name}}
</li>
</ul>