Spring e Angular - 2026

27 - Angular Signals

Olá, pessoal! Nessa vigésima sétima aula do treinamento, iremos aprender a trabalhar com Angular Signals.

O Angular Signals é um recurso incrível lançado pelo Angular na versão 16, em maio de 2023.

Ele funciona como uma "caixinha" inteligente para guardar dados. A grande mágica é que o Signals avisa o Angular de forma automática e imediata sempre que o valor ali dentro muda. Isso faz com que a tela se atualize muito mais rápido e o código fique bem mais simples de escrever e entender.

Confira as principais vantagens ao utilizar o Angular Signals:

• Atualiza apenas o pedacinho exato da tela que mudou, sem precisar redesenhar a página inteira.
• Deixa o código TypeScript e HTML muito mais simples e fáceis de ler.
• Substitui ferramentas mais difíceis (como o RxJS) em tarefas simples do dia a dia.
• Deixa o sistema visivelmente mais leve e rápido para o usuário final.
• Consegue criar "sinais derivados" que se atualizam sozinhos quando o sinal principal muda.

Para mais informações, clique aqui para acessar o site oficial e dominar o Angular Signals.

Veja abaixo as implementações realizadas no arquivo principal.ts:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-principal',
  imports: [ReactiveFormsModule],
  templateUrl: './principal.html',
  styleUrl: './principal.css',
})
export class Principal {
    
    // Visibilidade dos botões
    btnCadastrar = signal(true);
    
}

Podemos implementar a estrutura do formulário que está no arquivo principal.html:

<!-- Formulário -->
<form>
    <input type="hidden">
    <input type="text"   placeholder="Nome"   class="form-control">
    <input type="number" placeholder="Nota 1" class="form-control">
    <input type="number" placeholder="Nota 2" class="form-control">

    @if (btnCadastrar()) {
        <input type="button"  class="btn btn-primary">
    } else {
        <input type="button"  class="btn btn-primary">
        <input type="button"  class="btn btn-primary">
        <input type="button"  class="btn btn-primary">
    }
</form>

Abaixo compartilho nossa aula no YouTube, onde explico como implementar o Angular Signals: