Exercícios: Aula 05 📝

Pratique a troca de dados entre componentes.

Básico

1. Input: No componente Usuario, receba uma variável nome via @Input(). Exiba esse nome no template HTML.
2. Output: Crie um evento @Output() chamado aoCurtir em um componente de Foto. O evento deve disparar toda vez que o usuário clicar em um ícone de coração.

Intermediário

1. Objeto Inteiro: É possível passar um objeto inteiro (como um Produto com nome, preco e img) via @Input()? Como seria a sintaxe no componente pai para passar esse objeto?
2. EventEmitter: Qual a finalidade do comando this.meuEvento.emit(valor) dentro de uma função do componente filho?

Desafio

1. Carrinho de Compras: Crie um componente ProdutoItem. O pai deve passar as informações do produto via @Input. O filho deve ter um botão "Adicionar ao Carrinho". Ao clicar, o pai deve receber a notificação, receber o ID do produto e aumentar um contador de itens no carrinho que fica no topo da página.