Como usar o decorador de saída em Angular

No Angular, uma página da Web pode conter muitos componentes reutilizáveis ​​diferentes. Cada componente geralmente contém sua própria lógica TypeScript, modelo HTML e estilo CSS.

Você também pode reutilizar componentes dentro de outros componentes. Nesse caso, você pode usar o decorador de saída para enviar informações de um componente filho de volta para seu componente pai.

Você também pode usar o decorador de saída para ouvir os eventos que ocorrem no componente filho.

Como adicionar o decorador de saída a um componente filho

Primeiro, você precisará criar um novo aplicativo Angular com um componente pai e um componente filho.

Depois de ter um componente pai e filho, você pode usar o decorador de saída para transferir dados e ouvir eventos entre os dois componentes.

1. Crie um novo aplicativo Angular. Por padrão, “app” é o nome do componente raiz. Este componente inclui três arquivos principais: “app.component.html”, “app.component.css” e “app.component.ts”.
2. Para este exemplo, o componente “app” atuará como o componente pai. Substitua todo o conteúdo em “app.component.html” pelo seguinte: <div class="parent-component">
  <h1> This is the parent component </h1>
</div>
3. Adicione um pouco de estilo ao componente do aplicativo pai em “app.component.css”: .parent-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightcoral;
  padding: 20px
}
4. Use o comando “ng generate component” para criar um novo componente Angular chamado “data-component”. Neste exemplo, “data-component” representará o componente filho. ng g c data-component
5. Adicione conteúdo ao componente filho em “data-component.component.html”. Substitua o conteúdo atual para adicionar um novo botão. Vincule o botão a uma função que será executada quando o usuário clicar nele: <div class="child-component">
  <p> This is the child component </p>
  <button (click)="onButtonClick()">Click me</button>
</div>
6. Adicione um pouco de estilo ao componente filho em “data-component.component.css”: .child-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightblue;
  margin: 20px;
  padding: 20px
}
7. Adicione a função onButtonClick() ao arquivo TypeScript do componente, em “data-component.component.ts”: onButtonClick() {
}
8. Ainda dentro do arquivo TypeScript, adicione “Output” e “EventEmitter” na lista de importações: import { Component, Output, EventEmitter, OnInit } from '@angular/core';
9. Dentro da classe DataComponentComponent, declare uma variável Output para o componente chamada “buttonWasClicked”. Este será um EventEmitter. Um EventEmitter é uma classe interna que permite informar outro componente quando um evento ocorre. export class DataComponentComponent implements OnInit {
  @Output() buttonWasClicked = new EventEmitter<void>();
  //. ..
}
10. Use o emissor do evento “buttonWasClicked” dentro da função onButtonClick(). Quando o usuário clicar no botão, o componente de dados enviará este evento para o componente de aplicativo pai. onButtonClick() {
    this.buttonWasClicked.emit();
}

Como ouvir eventos no componente filho do componente pai

Para usar a propriedade Output do componente filho, você precisará escutar o evento emitido do componente pai.

1. Use o componente filho dentro de “app.component.html”. Você pode adicionar a saída “buttonWasClicked” como uma propriedade ao criar a tag HTML. Vincule o evento a uma nova função. <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
2. Dentro de “app.component.ts”, adicione a nova função para tratar o evento de clique do botão quando ele ocorrer no componente filho. Crie uma mensagem quando o usuário clicar no botão. message: string = ""


   buttonInChildComponentWasClicked() {
    this.message = 'The button in the child component was clicked';
}

3. Exiba a mensagem em “app.component.html”: <p>{{message}}</p>
4. Digite o comando “ng serve” em um terminal para executar seu aplicativo Angular. Abra-o em um navegador da Web em localhost:4200. Os componentes pai e filho usam cores de fundo diferentes para facilitar a distinção entre eles.
   
5. Clique no botão Clique em mim . O componente filho enviará o evento ao componente pai, que exibirá a mensagem.
   

Como enviar dados de um componente filho para um componente pai

Você também pode enviar dados do componente filho para o componente pai.

1. Em “data-component.component.ts”, adicione uma variável para armazenar uma lista de strings contendo alguns dados. listOfPeople: string[] = ['Joey', 'John', 'James'];
2. Modifique o tipo de retorno do emissor de evento buttonWasClicked. Altere de void para string[], para corresponder à lista de strings que você declarou na etapa anterior: @Output() buttonWasClicked = new EventEmitter<string[]>();
3. Modifique a função onButtonClick(). Ao enviar o evento para o componente pai, adicione os dados como um argumento na função emit(): onButtonClick() {
    this.buttonWasClicked.emit(this.listOfPeople);
}
4. Em “app.component.html”, modifique a tag “app-data-component”. Adicione o “$event” na função buttonInChildComponentWasClicked(). Contém os dados enviados do componente filho. <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
5. Atualize a função em “app.component.ts” para adicionar o parâmetro para os dados: buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
}
6. Adicione uma nova variável chamada “data” para armazenar os dados provenientes do componente filho: message: string = ""
data: string[] = []


   buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
    this.data = dataFromChild;
}

7. Exiba os dados na página HTML: <p>{{data.join(', ')}}</p>
8. Digite o comando “ng serve” em um terminal para executar seu aplicativo Angular. Abra-o em um navegador da Web em localhost:4200.
   
9. Clique no botão Clique em mim . O componente filho enviará os dados do componente filho para o componente pai.
   

Enviando dados para outros componentes usando o decorador de saída

Existem outros decoradores que você pode usar no Angular, como o decorador Input ou o decorador Component. Você pode aprender mais sobre como usar outros decoradores no Angular para simplificar seu código.