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.
1: <app-rating [rating]="product.averageRating ?? 0"
2: [product]="product" [showReviews]="true">
3: </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( ).
1: import { Component, inject, input } from '@angular/core';
2: import { Product } from '../../model/product.model';
3: import { CommonModule } from '@angular/common';
4: @Component({
5: selector: 'app-rating',
6: standalone: true,
7: imports: [CommonModule],
8: templateUrl: './rating.component.html',
9: styleUrls: ['./rating.component.css']
10: })
11: export class RatingComponent {
12: //Método antigo
13: // @Input() product: Product = {} as Product;
14: // @Input() rating: number = 0;
15: // @Input() showReviews: boolean = false;
16: // @Input() starSize: string = '18'; // Default star size is 18px
17: // Definindo os signals
18: product = input<Product>({} as Product);
19: rating = input<number>(0);
20: showReviews = input<boolean>(false);
21: starSize = input<string>('18'); // Default star size is 18px
22: //TEMPLATE
23: <div class="rating-container">
24: <!-- Full Stars -->
25: @for (star of getFullStars(); track $index) {
26: <span class="fas fa-star text-[#FBBF24]" [ngStyle]="{ 'font-size': starSize() + 'px' }"></span>
27: }
28: <!-- Partial Star -->
29: @for (star of getPartialStars(); track $index) {
30: <span class="fas fa-star-half-alt text-[#FBBF24]" [ngStyle]="{ 'font-size': starSize() + 'px' }"></span>
31: }
32: <!-- Empty Stars -->
33: @for (star of getEmptyStars(); track $index) {
34: <span class="fas fa-star text-gray-300" [ngStyle]="{ 'font-size': starSize() + 'px' }"></span>
35: }
36: <!-- Reviews Count -->
37: @if (showReviews()) {
38: <span class="ml-2 text-gray-800 text-sm">{{ product().reviewCount || 1 }} reviews</span>
39: }
40: </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:
Tela 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 para continuar a receber conteúdos sobre Angular e Frontend! 😀
Comentários
Postar um comentário