Entendendo os sinais Angular: um guia completo

No mundo em constante evolução do desenvolvimento web, a Angular continua a abrir caminho, aprimorando incansavelmente os recursos dos programadores Angular. Conhecido por seu compromisso inabalável com a melhoria, ele mais uma vez ultrapassa os limites do que é possível e, desta vez, apresenta um novo recurso empolgante com o lançamento Angular v16: Angular Signals.

Se você é novo ou já experimentou a visualização do desenvolvedor, mas deseja saber mais sobre como o Signal funciona, este guia abrangente ajudará você a entendê-lo.

Quais são Angular sinais e por que é importante aprender a usá-los agora?

Em essência, Angular Signals é um modelo de reatividade que funciona como uma função de argumento zero [(() => T)] e retorna um valor específico quando executado. Como ele faz isso? Há uma coisa importante aqui - a função getter. A chamada da função getter retorna o valor atual e Angular reconhece e atualiza esses valores reativos automaticamente quando suas dependências são alteradas.

Aqui está um diagrama para ajudar a visualizar esse processo:

Agora, quando você atualiza seu modelo, Angular aplica automaticamente as alterações à vista correspondente. Isso permite uma interação de visualização de modelo perfeita e sincronizada, levando a uma experiência do usuário mais suave.

Como Angular Sinais são baseados em um padrão chamado Padrão de Design do Observador, há um Editor que armazena o valor e uma lista de Assinantes que estão interessados nele. Depois que o valor for alterado, eles receberão uma notificação. Em outras palavras, você indica que apenas uma coisa mudou e, portanto, precisa ser atualizada. Isso elimina a necessidade de Angular verificar se há alterações em toda a árvore de componentes. Não há operações excessivamente complexas aqui.

Se há uma grande vantagem desse recurso, é sua capacidade de simplificar a atualização de valores de estado e otimizar o desempenho de renderização. Usando-o, os desenvolvedores obtêm controle refinado sobre as alterações de estado enquanto se beneficiam de coisas como:

• Rastreamento automático de dependências: Angular reconhece e atualiza automaticamente os valores reativos.
• Atualizações de estado mais simples de lidar: controle refinado sobre alterações de estado com complexidade mínima.
• Desempenho otimizado: Não há necessidade de verificar se há alterações em toda a árvore de componentes, o que melhora o desempenho.
• Valores calculados que são avaliados preguiçosamente.
• Granular state tracking.
• Possibilidade de implementar sinais fora dos componentes (funcionando muito bem com injeção de dependência).
• Improved Angular Change Detection.
• Melhor desempenho e capacidade de manutenção do aplicativo.

Angular Signals vs RxJS

Com tudo isso, muitos consideram o Angular Signals tão poderoso quanto o RxJS, mas com uma sintaxe mais simples. O que isso significa para o RxJS? Está condenado? Não na minha opinião. O novo recurso pode ocultar algumas das complexidades do RxJS, como gerenciamento manual de assinaturas e riscos de vazamento de memória, mas não substituirá o RxJS tão cedo.

Eu destaquei a importância desse novo recurso e o defini. Vamos explicar como criar e como usar Sinais em Angular.

Hands-On: Introdução ao Angular Signals

Examinarei três primitivas e mostrarei como elas funcionam e quando usar cada uma delas.

Pré-requisitos:

• Experiência anterior com Angular.
• Conhecimento básico dos princípios reativos do framework.
• Angular 16 version installed or running.

Em primeiro lugar, esse novo recurso apresenta três primitivos reativos: Sinais graváveis, Sinais computados e Efeitos, para permitir que você obtenha reatividade em seu aplicativo Angular.

1. Usando sinais graváveis

Estes são sinais que podem ser atualizados diretamente, mas para tê-los, você deve defini-los primeiro. Aqui está uma demonstração técnica:

Import { signal } from ‘@angular/core’;
const count = signal(0);
Count.set(count() +1);

2. Usando sinais computados

Com os Sinais Computados, você obtém um método declarativo para lidar com valores derivados. Quando há uma alteração em qualquer um dos sinais dos quais uma função depende, os sinais calculados são recalculados e produzem um sinal derivado somente leitura. Aqui está uma demonstração técnica:

import { computed, signal } from '@angular/core';
const count = signal(0);
const doubled = computed(() => count()

3. Usando efeitos

Os efeitos em sinais Angular executarão sua função em resposta a mudanças no sinal. Dentro do effect(), você pode modificar o estado imperativamente, alterar o DOM manualmente e executar código assíncrono. Aqui está uma demonstração técnica:

import { effect, signal } from '@angular/core';
const count = signal(0);
effect(() => {
  console.log('Count changed to:', count());
});
count.set(1);

Angular Signals Examples

Aqui está um exemplo prático para ver Angular Signals em ação. Vamos criar um aplicativo de contador simples usando todos os três primitivos:

import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
 
@Component({
  selector: 'app-counter',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <p>Count: {{ count() }}</p>
      <p>Doubled: {{ doubled() }}</p>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);
 
  constructor() {
    effect(() => {
      console.log('Count changed to:', this.count());
    });
  }
 
  increment() {
    this.count.set(this.count() + 1);
  }
}

Angular Sinais e Ignite UI: O que temos sob a manga?

A combinação de sinais Angular com Ignite UI for Angular pode elevar seus aplicativos da web para o próximo nível. Aqui está uma rápida olhada em como esse poderoso combo pode funcionar para você. Angular Signals simplificam o gerenciamento de estado rastreando as alterações com precisão, enquanto Ignite UI fornece componentes de interface do usuário robustos e de alto desempenho. Juntos, eles tornam seu aplicativo mais rápido e responsivo.

Agora, vamos criar uma grade de dados em tempo real usando Angular Signals e Ignite UI.

1. Configurar sinais – defina sinais para seus dados e quaisquer filtros

import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <igx-grid [data]="filteredData()">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = signal([]);  // Signal to store our data
  filter = signal('');  // Signal for filtering the data
 
  // Computed signal to apply the filter to the data
  filteredData = computed(() =>
    this.data().filter(item => item.name.includes(this.filter()))
  );
 
  constructor() {
    // Effect to log changes for debugging
    effect(() => {
      console.log('Data or filter changed:', this.filteredData());
    });
  }
 
  // Method to fetch and update data
  fetchData(newData) {
    this.data.set(newData);
  }
}

2. Atualizar dados: buscar novos dados e atualizar o Sinal

fetchData(newData) {
  this.data.set(newData);
}

 

3. Experimente atualizações suaves

A rede é atualizada em tempo real à medida que os dados mudam, graças ao poder reativo dos sinais Angular e à renderização eficiente de Ignite UI. Mas aqui está outro exemplo - sem Angular sinais.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <input [(ngModel)]="filter" (ngModelChange)="applyFilter()" placeholder="Filter" />
    <igx-grid [data]="filteredData">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = [];  // Data array
  filteredData = [];  // Filtered data array
  filter = '';  // Filter string
 
  applyFilter() {
    this.filteredData = this.data.filter(item => item.name.includes(this.filter));
  }
 
  fetchData(newData) {
    this.data = newData;
    this.applyFilter();
  }
}
With:
import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <input [value]="filter()" (input)="filter.set($event.target.value)" placeholder="Filter" />
    <igx-grid [data]="filteredData()">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = signal([]);  // Signal to store data
  filter = signal('');  // Signal for filter
 
  // Computed signal to filter data
  filteredData = computed(() =>
    this.data().filter(item => item.name.includes(this.filter()))
  );
 
  constructor() {
    // Effect to log changes for debugging
    effect(() => {
      console.log('Data or filter changed:', this.filteredData());
    });
  }
 
   fetchData(newData) {
    this.data.set(newData);
  }
}

Em conclusão...

Aqui está uma explicação simplificada de por que você gostaria de usar Angular Signals: sem Angular Signals, você atualiza e gerencia manualmente o estado e seus efeitos. Isso geralmente envolve a escrita de funções para atualizar o estado e disparar alterações, tornando o código mais complexo e propenso a erros. Com o Angular Signals, o gerenciamento de estado se torna mais declarativo, eficiente e menos propenso a erros, melhorando o desempenho e a capacidade de manutenção.