[Dúvida] Como e quando é chamado a função mudarIconeFavorito()?

<button class="botao-favorito" (click)="atualizarFavoritos()"> <img src=".\assets\imagens\icone-favorito-{{ mudarIconeFavorito() }}.png" alt="icone favorito {{ mudarIconeFavorito }}" /> </button>

Opa Ariel, tudo certo?

O método mudarIconeFavorito() é criado na aula Adicionando ícone de favorito no minuto 06:45.

Primeiramente, possuímos dois tipos de imagem para os favoritos:

A imagem inativa, que representa o vazio e o desfavoritado, é o padrão utilizado;
A imagem ativa, que representa a imagem com cor e muda ao clicar no botão.

Neste caso, o método mudarIconeFavorito está rodando constantemente, retornando “inativo”, ou seja, uma imagem vazia. Esse retorno é derivado de uma condição, qual condição? A de que o objeto pensamento.favorito receba “false”. Como por padrão ´”favorito” é um booleano com o valor false, a imagem se inicia e permanece vazia.

mudarIconeFavorito(): string {
    if(this.pensamento.favorito == false) {
      return 'inativo'
    }
    return 'ativo'
  }

No caso da mudança para uma imagem com cor, é neste momento que entram os dois métodos atualizarFavoritos() e mudarFavorito(). A função atualizarFavoritos() vai pegar a referência do elemento que você está clicando e repassar para a função mudarFavorito().

O que a função mudarFavorito() faz é negar um valor booleano, qual valor booleano? O “favorito”, que de false, torna-se true. Por fim, com o valor true, a condição colocada em nossa função mudarIconeFavorito() não será mais atingida, fazendo retorna a imagem ativa.

Fico à disposição.

Tenha um bom dia e bons estudos.

Mergulhe em programação