Como utilizar Signals no Angular 17: guia prático.

Intro

Este é um dos tópicos mais recentes no mundo do Angular, então resolvi deixar meu registro mostrando na prática como usei o signals em um projeto real de um cliente, assim você consiguirá uma introdução para se aprofundar posteriormente no assunto.

Primeiro, o que são os Signals?

Os Signals são funcionalidades do Angular que permitem rastrear e lidar alterações de estados de uma aplicação, assim como Observables. Ta, mas não conheço também Observables, para que serve isso Felipe?

Vamos lá, usando essa premissa, podemos otimizar a detecção de mudanças em dados assíncronos. Eles são valores reativos, ou seja, mudam ao longo do tempo e notificam qualquer ponto do código que os utilize quando sofrem alterações.

Um exemplo de uso de Signals é quando o ChatComponent possui um signal chamado messages que contém uma array de mensagens. Quando o usuário envia uma mensagem no ChatComponent, o signal messages é atualizado. Ainda não está claro? Calma que vai ficar!!! abordando validações síncronas e assíncronas, permitindo que você crie validações robustas e adaptadas às necessidades do seu projeto.

Contexto do projeto em que utilizei Signals

Nesse projeto que vou utilizar como exemplo, é um e-commerce de ferramentas, onde apliquei em um componente “RATING” que reutilizo em várias partes do projeto para mostrar detalhes das avaliações dos produtos.

<app-rating [rating]="product.averageRating ?? 0" 
[product]="product" [showReviews]="true">
</app-rating>

Bom, vamos ao que interessa, no componente rating, tenho as avaliações como as estrelas indicando a pontuação (rating), opção de mostrar o contador de avaliações (showReviews) e opção de tamanho definido das estrelas (starSize).

Note a diferença nos inputs e também no template onde usamos ( ) para usar como função, por exemplo no primeiro : getFullStars( )

import { Component, inject, input } from '@angular/core';
import { Product } from '../../model/product.model';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-rating',
standalone: true,
imports: [CommonModule],
templateUrl: './rating.component.html',
styleUrls: ['./rating.component.css']
})
export class RatingComponent {
//Método antigo
// @Input() product: Product = {} as Product;
// @Input() rating: number = 0;
// @Input() showReviews: boolean = false;
// @Input() starSize: string = '18'; // Default star size is 18px

// Definindo os signals
product = input<Product>({} as Product);
rating = input<number>(0);
showReviews = input<boolean>(false);
starSize = input<string>('18'); // Default star size is 18px

//TEMPLATE
<div class="rating-container">
  <!-- Full Stars -->
  @for (star of getFullStars(); track $index) {
    <span class="fas fa-star text-[#FBBF24]" [ngStyle]="{ 'font-size': starSize() + 'px' }"></span>
  }

  <!-- Partial Star -->
  @for (star of getPartialStars(); track $index) {
    <span class="fas fa-star-half-alt text-[#FBBF24]" [ngStyle]="{ 'font-size': starSize() + 'px' }"></span>
  }

  <!-- Empty Stars -->
  @for (star of getEmptyStars(); track $index) {
    <span class="fas fa-star text-gray-300" [ngStyle]="{ 'font-size': starSize() + 'px' }"></span>
  }

  <!-- Reviews Count -->
  @if (showReviews()) {
    <span class="ml-2 text-gray-800 text-sm">{{ product().reviewCount || 1 }} reviews</span>
  }
</div>

Com isso já estamos usando signals com inputs, o que ajuda até na hora de desenvolver com uma sintaxe mais limpa.

Toda vez que o usuário cria uma nova avaliação, meu signals atualiza os dados diretamente para onde importei o meu componente rating, veja o contador e o rating indicando no componente de detalhes do produto:

Esse é apenas um dos exemplos da utilização do novo signals, sugiro aprofundar de acordo com sua necessidade para utilizá-lo da melhor forma nos seus projetos futuros.

Me siga também no Linkedin e Medium para continuar a receber conteúdos sobre Angular e Frontend! 😀