🚀 Case de Sucesso com Angular 17

🚀 Case de Sucesso com Angular 17: Simplificando a Gestão de Estado com Signals

Recentemente, eu estava enfrentando desafios na gestão de estado em um aplicativo de e-commerce. Cada nova funcionalidade adicionava camadas de complexidade, dificultando a manutenção do código. Foi então que decidi explorar os Signals do Angular 17.

Uso de Signals para Gestão de Estado:

O Angular 17 trouxe os Signals, uma forma reativa e eficiente de gerenciar estados. Aqui está um exemplo de como isso simplificou nosso código de gestão do carrinho de compras (Imagens a baixo).

Benefícios
1- Simplicidade: Código mais limpo e fácil de entender.
2- Reatividade: Mudanças no estado são automaticamente refletidas na UI.
3- Performance: Melhor eficiência, reduzindo renderizações desnecessárias.

A adoção de Signals no Angular 17 não apenas simplificou a gestão de estados, mas também melhorou a performance e a manutenção do código.
Isso resultou em uma aplicação mais robusta e uma equipe mais produtiva.

Compartilho essa experiência para mostrar como pequenas mudanças podem trazer grandes benefícios, demonstrando o poder do Angular 17 em projetos reais.

Mas e você, já se atentou a essa novidade?
Conecte-se comigo no LinkedIn: Lucas Muryllo
Link: https://www.linkedin.com/in/lucasmuryllo/

import { Injectable } from '@angular/core';
import { Signal } from '@angular/core/signals';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private _items = new Signal<CartItem[]>([]);

  get items() {
    return this._items.value;
  }

  addItem(item: CartItem) {
    this._items.update(currentItems => [...currentItems, item]);
  }

  removeItem(itemId: number) {
    this._items.update(currentItems => currentItems.filter(item => item.id !== itemId));
  }
}

import { Component } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-cart',
  template: `
    <div *ngFor="let item of cartService.items">
      {{ item.name }} - {{ item.price }}
      <button (click)="removeItem(item.id)">Remover</button>
    </div>
    <button (click)="addItem()">Adicionar Item</button>
  `
})
export class CartComponent {
  constructor(public cartService: CartService) {}

  addItem() {
    const newItem = { id: Date.now(), name: 'Item ' + Date.now(), price: Math.random() * 100 };
    this.cartService.addItem(newItem);
  }

  removeItem(itemId: number) {
    this.cartService.removeItem(itemId);
  }
}