1
resposta

Sublinhar o item que foi comprado

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>

1 resposta

Oii, Alan. Tudo bem?

Muito obrigada por compartilhar com a gente seu exercício prático.

Continue firme nos estudos.

Um abraço.