Na página item/item.component.ts Declarado um output e criado um método que marca o item como comprado, alterando a lista
@Output() marcandoItemComoComprado = new EventEmitter();
marcarItemComprado() {
this.item.comprado = true;
this.marcandoItemComoComprado.emit(this.item);
}
Na página src/app/components/item/item.component.html o método é chamado ao clicar no checkbox e sublinha o texto.
<input
class="checkbox"
type="checkbox"
name="comprado"
id="comprado"
(change)="marcarItemComprado()"
[checked]="item.comprado">
<p class="description" [ngClass]="item.comprado ? 'line-through' : ''">{{ item.nome }}</p>
<div class="d-contents" *ngIf="!item.comprado">
<fa-icon class="delete-icon" [icon]="faTrash" ></fa-icon>
<fa-icon class="edit-icon" [icon]="faPen" (click)="editarItem()"></fa-icon>
</div>
<small class="date">{{ item.data }}</small>
Em src/app/app.component.ts criado o método que vai receber a alteração do componente filho.
marcarItemComprado()(item: Item) {
this.itemParaSerComprado = item;
}
em /src/app/app.component.html O matodo é chamado através do evento (marcandoItemComoComprado)
<app-item [item]="item" (emitindoItemParaEditar)="editarItem($event)" (marcandoItemComoComprado)="marcarItemComprado($event)"></app-item>