Para quem está começando a utilizar o framework Angular, eu irei apresentar algo que será utilizado com frequência, então, é importante que saiba muito bem como e quando utilizar. Vou mostrar o funcionamento do decorador @Output.
Para que serve?
A arquitetura do angular nos permite criar diversos componentes, o que é muito bom, visto que a reutilização de código fica mais fácil. Mas, também existem dificuldades com essa arquitetura, uma delas é que os componentes podem ser utilizados dentro de outros componentes. Com isso, surge um problema que é, a necessidade de troca de informações entre o componente filho e o componente pai. Para isso, utilizamos o @Output. O @Output é responsável por facilitar a comunicação de filho para o pai. O nome @Output passa a ideia de saída de um valor, que é o que acontece na visão do componente filho.
Exemplo prático
Vamos criar um programa que irá listar o nome de personagens. Os personagens serão inseridos no componente filho e exibido no componente pai. Vamos começar implementando o componente filho. Nele criaremos a variável novoPersonagem que será decorado pelo @Output.
Perceba que, a variável novo personagem recebe o new EventEmitter que faz parte do @angular/core. O EventEmitter permite ao componente filho gerar um evento para o componente pai, que será utilizado quando existir a necessidade de enviar algo. Além disso, na imagem podemos ver o método enviarParaPai que recebe uma string. Esse método utiliza o emit para emitir ao componente pai que queremos enviar algo, que nesse caso é a variável value.
Para chamar o nosso método enviarParaPai e assim disparar o evento de emitir, vamos implementar o html do filho.
O html possui um input para que o usuário escreva o nome dos personagens, e um button que chama o método enviarParaPai passando o que está escrito no input. O próximo passo é no pai.
Começamos pelo html, que possui também um ngFor para exibir todos os personagens adicionados.
Perceba que no componente filho decoramos a variável novoPersonagem e emitimos a inserção de um novo personagem. No html do componente pai, ele aparece novamente pois recebeu o decorador @Output o que lhe permite comunicar com o componente pai. Ao emitir um valor será chamado o método addPersonagem passando o item transmitido pelo emit que foi enviado pelo filho.
Para finalizar, vamos implementar o typeScript do componente pai, que deve conter a variável que irá guardar o nome dos personagens, e o método addPersonagem que irá adicionar o novo personagem emitido.
Espero que esse texto tenha ajudado a você que está começando!
Top comments (0)