image

Access unlimited bootcamps and 650+ courses

50
%OFF
Article image
Felipe Silva
Felipe Silva17/10/2024 12:08
Share

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:

    image

    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! 😀

    Share
    Comments (0)