Learn Angular Signals the Easy Way with Examples 🛠

Introduction 📕:

In this blog, I’ll show you two simple examples using Angular Signals, a new way to manage data reactively. Signals make it easier to handle state in your app, making it more efficient and easier to scale. Let’s get started and see how to use them!

💻 1. Real-Time Search/Filter Powered by Signals

In this example, we’ll build a product list with a real-time search feature using Angular Signals. As the user types, the list updates automatically based on the search input for smooth filtering ⚡

Set Up the Service

We will create a service to hold the list of products and manage the search query.

import { Injectable } from '@angular/core';
import { signal, computed } from '@angular/core';

interface Product {
  id: number;
  name: string;
  price: number;
}

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  // Signal to store product list
  private products = signal<Product[]>([
    { id: 1, name: 'Laptop', price: 1000 },
    { id: 2, name: 'Phone', price: 600 },
    { id: 3, name: 'Headphones', price: 200 },
    { id: 4, name: 'Keyboard', price: 80 },
    { id: 5, name: 'Mouse', price: 40 },
  ]);

  // Signal for search query
  private searchQuery =…