🧩 Exercícios Práticos: Comunicação entre Componentes com input() e output()

Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 05.1 — Input Signal com input.required()

Contexto: Input Signal com input.required() no contexto de Comunicação entre Componentes com input() e output().

Requisitos de Execução:

  1. Declarar propriedade de entrada no filho com titulo = input.required<string>().

Resultado Esperado

Input Signal tipado e validado como obrigatório em tempo de compilação.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_1_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Comunicação entre Componentes com input() e output()
🔑 Gabarito de Código & Solução Comentada 
// card-filho.component.ts
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-card-filho',
  standalone: true,
  template: `<h3>{{ titulo() }}</h3>`
})
export class CardFilhoComponent {
  titulo = input.required<string>();
  subtitulo = input<string>('Valor Padrão');
}

🔍 Nível 2: Prática

Problema 05.2 — Output Signal com output() e Emissão de Eventos

Contexto: Output Signal com output() e Emissão de Eventos no contexto de Comunicação entre Componentes com input() e output().

Requisitos de Execução:

  1. Declarar evento de saída no componente filho com excluir = output<number>() e emitir no clique.

Resultado Esperado

Evento emitido com `this.excluir.emit(id)` capturado pelo componente pai.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_2_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Comunicação entre Componentes com input() e output()
🔑 Gabarito de Código & Solução Comentada 
// item-linha.component.ts
import { Component, input, output } from '@angular/core';

@Component({
  selector: 'app-item-linha',
  standalone: true,
  template: `
    <div>
      <span>{{ nome() }}</span>
      <button (click)="onRemover()">Excluir</button>
    </div>
  `
})
export class ItemLinhaComponent {
  id = input.required<number>();
  nome = input.required<string>();
  excluir = output<number>();

  onRemover() { this.excluir.emit(this.id()); }
}

⚡ Nível 3: Integração

Problema 05.3 — Two-Way Binding com model() no Angular 18

Contexto: Two-Way Binding com model() no Angular 18 no contexto de Comunicação entre Componentes com input() e output().

Requisitos de Execução:

  1. Criar componente de contador utilizando contador = model<number>(0) permitindo binding [(contador)]='valor'.

Resultado Esperado

Two-way binding nativo com Signals simplificando a comunicação pai-filho.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_3_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Comunicação entre Componentes com input() e output()
🔑 Gabarito de Código & Solução Comentada 
// contador-model.component.ts
import { Component, model } from '@angular/core';

@Component({
  selector: 'app-contador-model',
  standalone: true,
  template: `
    <button (click)="contador.set(contador() - 1)">-</button>
    <span>{{ contador() }}</span>
    <button (click)="contador.set(contador() + 1)">+</button>
  `
})
export class ContadorModelComponent {
  contador = model<number>(0);
}

🏆 Nível 4: Desafio Corporativo

Problema 05.4 — Transformação de Inputs com input(transform)

Contexto: Transformação de Inputs com input(transform) no contexto de Comunicação entre Componentes com input() e output().

Requisitos de Execução:

  1. Converter automaticamente inputs de string para boolean usando desabilitado = input(false, { transform: booleanAttribute }).

Resultado Esperado

Transformador de atributo nativo aplicado na prop de entrada.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_4_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Comunicação entre Componentes com input() e output()
🔑 Gabarito de Código & Solução Comentada 
// transform-input.component.ts
import { Component, input, booleanAttribute } from '@angular/core';

@Component({
  selector: 'app-btn-custom',
  standalone: true,
  template: `<button [disabled]="desabilitado()">Salvar</button>`
})
export class BtnCustomComponent {
  desabilitado = input(false, { transform: booleanAttribute });
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos