Angular EventEmitter (Output)
Nessa artigo iremos ver de forma prática como enviar informações de um componente filho para o componente pai. Para isso utilizaremos a classe EventEmitter do Angular. Ela nos proporciona uma série de funcionalidades e aqui veremos um exemplo, para começarmos a entender esse poderoso recurso.
1. Criar o projeto
Para otimizar nosso tempo, clone o repositório do link abaixo:
Nesse projeto já deixei configurado alguns componentes e rotas para que possamos ter um projeto como base para as próximas etapas.
2. Adicionando o Output
Após clonar o projeto no passo 1 e rodar o comando ng server, você deve estar vendo no seu navegador um resultado como esse:
O que vamos fazer agora é passar as informações do componente ChildA para o seu pai, o componente FirstComponent. Vamos abrir o arquivo child-a.component.html e adicionar o código abaixo.
Agora no arquivo child-a.component.ts vamos adicionar o Output para através dele emitirmos o evento ao componente pai. Também vamos adicionar a função enviarDados(), que será chamada no Event Binding do nosso button.
Agora quando clicamos no botão estamos emitindo um evento, nesse caso isso significa que estamos enviando as informações contidas na constante user. Poderíamos enviar qualquer tipo de informação utilizando esse método.
Porém ainda não estamos recebendo essas informações no componente pai. Para que isso ocorra precisamos informar qual função será chamada quando o evento enviarDadosEvent for chamado. Podemos fazer da seguinte forma:
2.1 No arquivo first.component.html adicione o seguinte código:
Note que na linha 5 adicionamos a referencia ao evento e a função que será chamada ao dispararmos esse evento, no nosso exemplo enviarDadosCallback($event).
Agora basta adicionarmos no componente pai a função enviarDadosCallback(event). Esta função receberá como parâmetro o event, ou seja, o conteúdo que enviamos do nosso componente filho: a constante user.
Para vermos em tela o resultado, vamos adicionar no html do componente pai as informações recebidas do componente filho para vermos a magica acontecendo! =D
Pronto! Você já poderá observar que ao clicar no botão será enviado ao componente pai as informações do usuário, que estão originalmente declaradas no componente filho. Deu pra entender!? =D
Lembre sempre de pensar em senários mais complexos e teste mais a fundo a funcionalidade que fizemos nesse artigo. Quanto mais praticar, mais fácil ficará! :P Bons estudos!
