Angular Academy · Aula

Saídas com output()

Emita eventos com a nova API output.

Aula 3 de 413 etapas

Saídas com output() é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Outputs na era das signals

Junto com os inputs signal, o Angular moderno fornece a função output() para declarar eventos de componentes, substituindo o clássico @Output com EventEmitter.

Declarando um output

Chame output() para criar um evento que um componente possa emitir. Forneça um tipo genérico para os dados do evento.

import { Component, output } from "@angular/core";

@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
  changed = output<number>();
}

Emitindo um evento

Chame emit no output para enviar um valor aos ouvintes.

export class CounterComponent {
  changed = output<number>();
  count = 0;
  inc() {
    this.count++;
    this.changed.emit(this.count);
  }
}

Escutando a partir do componente pai

O componente pai se inscreve com uma vinculação de evento, usando $event para os dados emitidos.

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) {
  this.total = value;
}

Outputs sem dados

Para eventos que não carregam dados, use output<void>() e emita sem argumento.

closed = output<void>();

close() {
  this.closed.emit();
}

output vs EventEmitter

A API output() é mais simples e não depende de RxJS. Você não cria uma instância de EventEmitter; a função faz isso por você.

// classic:
@Output() changed = new EventEmitter<number>();

// modern:
changed = output<number>();

Criando um alias para um output

Exponha um nome de evento público diferente com a opção alias.

valueChange = output<number>({ alias: "change" });

<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>

Outputs e vinculação bidirecional

Combinar um input com um output chamado xChange habilita a vinculação bidirecional, embora model() faça isso de maneira mais concisa.

value = input(0);
valueChange = output<number>();
// enables [(value)] on the parent

Derivando outputs de Observables

O auxiliar de interoperabilidade outputFromObservable transforma um Observable em um output, conectando fluxos RxJS à nova API.

import { outputFromObservable } from "@angular/core/rxjs-interop";

clicks = outputFromObservable(this.clicks$);

Segurança de tipos

Como os outputs são tipados, o parâmetro do manipulador no componente pai é verificado em relação ao tipo dos dados emitidos, detectando incompatibilidades durante a compilação.

selected = output<{ id: number }>();

<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>

Quando usar output

Prefira output() para componentes novos: ele é mais leve, oferece segurança de tipos e combina naturalmente com inputs signal para modelar a comunicação entre componentes.

Verificação rápida

Teste sua compreensão da função de output.

Responda na aula interativa

Recapitulação

A função output() declara eventos tipados sem um EventEmitter. Emita com emit(), escute por meio da vinculação de eventos e de $event, crie aliases quando necessário e combine com inputs signal para uma comunicação limpa entre componentes.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 38
Aulas: 144

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Saídas com output()” é grátis?

Sim — o texto completo de “Saídas com output()” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Saídas com output()”?

Emita eventos com a nova API output. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Saídas com output()”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy