Angular signal best use case with example?

 Angular Signals are a powerful feature that enhances reactivity and state management in Angular applications. Here are some of the best use cases for Angular Signals:

1. State Management: Signals can be used to manage application state more efficiently. For example, in a shopping cart application, you can use signals to track the number of items in the cart and update the UI accordingly.

   typescript
   1import { Component } from '@angular/core';
   2import { signal } from '@angular/core';
   3
   4@Component({
   5  selector: 'app-cart',
   6  template: `
   7    <h1>Shopping Cart</h1>
   8    <p>Items in cart: {{ itemCount() }}</p>
   9    <button (click)="addItem()">Add Item</button>
   10  `
   11})
   12export class CartComponent {
   13  itemCount = signal(0);
   14
   15  addItem() {
   16    this.itemCount.update(count => count + 1);
   17  }
   18}

2. Form Handling: Signals can simplify form management by representing form control values. This allows for automatic updates to the UI when form values change, without the need for manual subscriptions.

   typescript
   1import { Component } from '@angular/core';
   2import { FormBuilder, FormGroup } from '@angular/forms';
   3import { toSignal } from '@angular/core';
   4
   5@Component({
   6  selector: 'app-user-form',
   7  template: `
   8    <form [formGroup]="userForm">
   9      <label for="name">Name:</label>
   10      <input id="name" formControlName="name" />
   11      <p>Your name is: {{ nameSignal() }}</p>
   12    </form>
   13  `
   14})
   15export class UserFormComponent {
   16  userForm: FormGroup;
   17  nameSignal = toSignal(this.userForm.get('name').valueChanges);
   18
   19  constructor(private fb: FormBuilder) {
   20    this.userForm = this.fb.group({
   21      name: ['']
   22    });
   23  }
   24}

3. Dynamic Theming: Signals can be used to manage application themes, allowing for efficient updates when a user changes the theme. This ensures that only the components dependent on the theme are re-rendered.

   typescript
   1import { Injectable } from '@angular/core';
   2import { signal } from '@angular/core';
   3
   4@Injectable({ providedIn: 'root' })
   5export class ThemeService {
   6  private themeSignal = signal('light');
   7
   8  setTheme(theme: string) {
   9    this.themeSignal.set(theme);
   10  }
   11
   12  get theme() {
   13    return this.themeSignal;
   14  }
   15}
   16
   17@Component({
   18  selector: 'app-theme-switcher',
   19  template: `
   20    <button (click)="switchTheme('light')">Light Theme</button>
   21    <button (click)="switchTheme('dark')">Dark Theme</button>
   22  `
   23})
   24export class ThemeSwitcherComponent {
   25  constructor(private themeService: ThemeService) {}
   26
   27  switchTheme(theme: string) {
   28    this.themeService.setTheme(theme);
   29  }
   30}

4. Real-Time Data Updates: Signals are ideal for applications that require real-time data updates, such as chat applications or live scoreboards. They ensure that only the affected components are updated when new data arrives.

   typescript
   1import { Component } from '@angular/core';
   2import { signal } from '@angular/core';
   3
   4@Component({
   5  selector: 'app-chat',
   6  template: `
   7    <div *ngFor="let message of messages()">
   8      {{ message }}
   9    </div>
   10    <input [(ngModel)]="newMessage" (keyup.enter)="sendMessage()" />
   11  `
   12})
   13export class ChatComponent {
   14  messages = signal<string[]>([]);
   15  newMessage = '';
   16
   17  sendMessage() {
   18    this.messages.update(msgs => [...msgs, this.newMessage]);
   19    this.newMessage = '';
   20  }
   21}

These examples illustrate how Angular Signals can be effectively utilized in various scenarios, enhancing the reactivity and performance of Angular applications.