🧩 Exercícios: Reatividade com Angular Signals (signal, computed, effect)

🧩 Exercícios Práticos: Reatividade com Angular Signals (signal, computed, effect)

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

---

🧭 Navegação Pedagógica

• 📖 Teoria do Capítulo

  💻 Exemplos

  📊 Slides

  🧠 Quiz

---

🎯 Nível 1: Fundamentos

Problema 06.1 — Criação e Mutação de Writable Signals com signal(), set() e update()

Contexto: Criação e Mutação de Writable Signals com signal(), set() e update() no contexto de Reatividade com Angular Signals (signal, computed, effect).

Requisitos de Execução:

1. Criar signal contador = signal(0), atualizar com set(10) e incrementar com update(n => n + 1).

Resultado Esperado

Signal reativo mutado com operações atômicas sem Zone.js.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_06_1_SeuNome
2. Envie na tarefa: Atividade Cap 06 - Reatividade com Angular Signals (signal, computed, effect)

🔑 Gabarito de Código & Solução Comentada

// signals-basic.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-signals-demo',
  standalone: true,
  template: `
    <p>Valor: {{ contador() }}</p>
    <button (click)="incrementar()">+1</button>
    <button (click)="resetar()">Reset</button>
  `
})
export class SignalsDemoComponent {
  contador = signal<number>(0);
  incrementar() { this.contador.update(v => v + 1); }
  resetar() { this.contador.set(0); }
}

---

🔍 Nível 2: Prática

Problema 06.2 — Sinais Computados com computed() e Memoização Automática

Contexto: Sinais Computados com computed() e Memoização Automática no contexto de Reatividade com Angular Signals (signal, computed, effect).

Requisitos de Execução:

1. Criar computed signal total = computed(() => preco() * quantidade()) dependente de dois signals.

Resultado Esperado

Computed recalculado de forma lazy apenas quando preco ou quantidade forem mutados.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_06_2_SeuNome
2. Envie na tarefa: Atividade Cap 06 - Reatividade com Angular Signals (signal, computed, effect)

🔑 Gabarito de Código & Solução Comentada

// signals-computed.component.ts
import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-carrinho-signals',
  standalone: true,
  template: `<p>Total: R$ {{ total().toFixed(2) }}</p>`
})
export class CarrinhoSignalsComponent {
  preco = signal(150.0);
  quantidade = signal(2);
  total = computed(() => this.preco() * this.quantidade());
}

---

⚡ Nível 3: Integração

Problema 06.3 — Efeitos Colaterais com effect() e Contexto de Injeção

Contexto: Efeitos Colaterais com effect() e Contexto de Injeção no contexto de Reatividade com Angular Signals (signal, computed, effect).

Requisitos de Execução:

1. Registrar effect() no construtor gravando logs sempre que o estado do usuário for alterado.

Resultado Esperado

Efeito colateral disparado reativamente na mudança do signal.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_06_3_SeuNome
2. Envie na tarefa: Atividade Cap 06 - Reatividade com Angular Signals (signal, computed, effect)

🔑 Gabarito de Código & Solução Comentada

// signals-effect.component.ts
import { Component, signal, effect } from '@angular/core';

@Component({
  selector: 'app-effect-demo',
  standalone: true,
  template: `<button (click)="usuario.set('Carlos')">Mudar Nome</button>`
})
export class EffectDemoComponent {
  usuario = signal('Visitante');

  constructor() {
    effect(() => {
      console.log('LOG REATIVO: Usuário alterado para:', this.usuario());
    });
  }
}

---

🏆 Nível 4: Desafio Corporativo

Problema 06.4 — Aplicações Zoneless com Signals (provideExperimentalZonelessChangeDetection)

Contexto: Aplicações Zoneless com Signals (provideExperimentalZonelessChangeDetection) no contexto de Reatividade com Angular Signals (signal, computed, effect).

Requisitos de Execução:

1. Configurar aplicação Angular 18 para rodar 100% Zoneless sem overhead de monkey-patching do Zone.js.

Resultado Esperado

Aplicação Zoneless de alta performance operando exclusivamente via Signals.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_06_4_SeuNome
2. Envie na tarefa: Atividade Cap 06 - Reatividade com Angular Signals (signal, computed, effect)

🔑 Gabarito de Código & Solução Comentada

// main-zoneless.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideExperimentalZonelessChangeDetection()]
});

---

⬅️ Voltar ao Índice de Exercícios

📚 Sumário de Tópicos