Angular Signals - O futuro da reatividade

O que são Angular Signals?

Signals são uma forma simplificada e poderosa de gerenciar estados e reatividade em aplicações Angular. Com Signals, você pode:

• Reagir a mudanças de estado de maneira mais eficiente.
• Reduzir a complexidade do código, tornando-o mais fácil de entender e manter.
• Melhorar o desempenho da aplicação, uma vez que a reatividade é otimizada.

Principais Benefícios:

1. Simplicidade: A API é intuitiva e fácil de usar, permitindo que você se concentre na lógica da sua aplicação.
2. Desempenho: Menos ciclos de detecção de mudanças significam aplicações mais rápidas e responsivas.
3. Interoperabilidade: Funciona bem com outras ferramentas e bibliotecas do ecossistema Angular.

Como Funciona?

Com Signals, você pode criar "sinais" que representam estados da sua aplicação. Quando um sinal muda, todos os componentes que dependem dele reagem automaticamente. Isso significa que você pode criar interfaces mais dinâmicas e interativas com menos esforço.

Exemplo rápido

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


@Component({
selector: 'app-card',
standalone: true,
imports: [JsonPipe],
templateUrl: './card.component.html',
styleUrl: './card.component.scss',
})
export class CardComponent {
count = signal<number>(0);


cart = signal({
  produt: 'hi',
  email: 'example@google.com',
});




ngOnInit() {
  this.cart.update((cartDetails) => ({
    ...cartDetails,
    produt: 'hihi',
    email: 'example@example.com',
  }));
}
}