Saṃvit, Kalika e Bhū analisam um livro entre lanternas e diagramas luminosos de componentes Angular.

Matrix on-line · Experimento 01

Componentes em conversa

Envie um valor do componente pai ao filho. Depois, acompanhe a resposta que volta por um evento e veja o código envolvido em cada etapa.

Iniciar circuito

Circuito interativo

Pai, filho e o caminho de volta

O pai guarda a mensagem e o Angular a conduz ao filho. O filho escolhe uma resposta e emite um evento de retorno. Você aciona o fluxo; a interface registra cada passagem.

Como experimentar

Acompanhe o caminho da mensagem

1
O pai enviaEscreva uma mensagem ou use o exemplo.
2
O filho escolheLeia o valor recebido e selecione uma resposta.
3
O pai recebeVeja o evento retornar com a resposta escolhida.

Component@Input()@Output()EventEmitter

Componente pai

O emissor

[message] é uma property binding: ela conduz o valor do pai para a entrada do filho.

[message]

Componente filho

O receptor

Valor recebido pelo @InputO filho ainda aguarda um valor do pai.

Escolha uma resposta do filho

@Output() cria uma saída pela qual o filho emite um evento para quem o contém.

Retorno ao componente pai Nenhum evento retornou ainda.

(reply)

Registro do Angular

O que aconteceu por baixo da interface

Atualização automática

Este painel não recebe cliques. Ele apenas registra, em ordem, o que suas ações provocam no circuito acima.

01
O pai atualiza o valor guardado em seu estado.
02
O Angular avalia a expressão ligada à propriedade message.
03
O filho recebe o novo valor por sua entrada @Input.
04
Ao clicar, o filho emite um evento por @Output.
05
O pai captura o evento e atualiza novamente sua interface.

1. O pai prepara e envia o valor. Signals guardam a mensagem enquanto o método de envio atualiza o valor que será entregue ao filho.

Signals guardam a mensagem enquanto o método de envio atualiza o valor que será entregue ao filho.

matrix.tsTypeScript

1. O pai prepara e envia o valor

readonly draftMessage = signal('');
readonly deliveredMessage = signal('');

sendMessage(): void {
  const message = this.draftMessage().trim();
  this.deliveredMessage.set(message);
}

<app-matrix-message-node
  [message]="deliveredMessage()"
  (reply)="receiveReply($event)"
/>

@Input({ required: true }) message = '';
@Output() readonly reply =
  new EventEmitter<MatrixReply>();

selectReply(kind: MatrixReplyKind): void {
  this.reply.emit({
    kind,
    originalMessage: this.message,
    characterCount: Array.from(this.message).length,
  });
}

receiveReply(reply: MatrixReply): void {
  this.childReply.set(reply);
  this.stage.set(5);
}

O que você faz?

Escreve uma mensagem, envia ao filho e pede que ele responda. Cada ação modifica a etapa visível do experimento.

O que o Angular percebe?

Ele detecta a mudança, reavalia a ligação entre os componentes e atualiza somente os trechos da interface que dependem daqueles valores.

O que se move no código?

O valor desce do pai para o filho por @Input. O evento retorna do filho para o pai por @Output e EventEmitter.