Solução alternativa - Desafio da aula 4

Cheguei numa solução diferente do gabarito e gostaria de compartilhar para quem tem curiosidade de ver diferentes formas de resolver o mesmo problema.

No template, troquei o dado que é feito o bind com o trigger do botão. De [@checkedButton] = tarefa.id === id ? 'checked' : 'unchecked' para [@checkedButton]="tarefa.statusFinalizado".

<button
  [ngClass]="
    tarefa.statusFinalizado == true
    ? 'icone-checked'
    : 'icone-unchecked'
  "
  (click)="finalizarTarefa(tarefa)"
  [@checkedButton]="tarefa.statusFinalizado"
></button>

No método finalizarTarefa, removi a linha this.id = tarefa.id, pois só era utilizada neste método. O atributo id também pode ser apagado da classe.

finalizarTarefa(tarefa: Tarefa) {
  this.service.atualizarStatusTarefa(tarefa);
}

Por fim, no arquivo animations.ts, alterei a expresão de mudança de estado de * => checked para * => true.

export const checkedButtonTrigger = trigger('checkedButton', [
  transition('* => true', [
    animate(
      '400ms ease-in',
      style({
        transform: 'scale(0.4)',
      })
    ),
  ]),
]);