Signal Examples

Basic Counter

Learn fundamental signal operations with a simple increment/decrement counter. Perfect introduction to reactive state management.

Auto-Increment Timer

Discover automatic signal updates with interval-based counter. Demonstrates reactive programming with time-based state changes.

Dynamic Name Input

Master real-time form binding with signals. Update user names instantly as you type, showcasing reactive form controls.

Computed Signals

Explore derived state with computed signals. Automatically calculate values based on other signals for powerful reactive patterns.

Todo List Manager

Build a complete todo application with signals. Add, edit, delete, and track completion status with reactive state management.

Two-Way Data Binding

Implement seamless ngModel integration with signals. Connect form inputs to reactive state for modern Angular development.

Observable to Signal

Convert RxJS observables to signals effortlessly. Bridge traditional reactive programming with modern signal-based architecture.

Side Effects & Lifecycle

Handle side effects with signal reactions. Learn to trigger actions when signal values change, perfect for logging and API calls.

VAT Calculator

Create a sophisticated tax calculator with signals. Real-time calculations with multiple tax rates and dynamic pricing logic.

Product Search Engine

Build a powerful product search with filtering capabilities. Combine signals for instant search results and advanced filtering options.

Signal Input Properties

Master component communication with signal inputs. Pass reactive data between parent and child components efficiently.

Untracked Signals

Learn advanced optimization with untracked signals. Prevent unnecessary reactivity while maintaining performance and control.

Shopping Cart System

Develop a complete e-commerce cart with signals. Manage products, quantities, and real-time total calculations seamlessly.

Virtual Scroll Performance

Optimize large datasets with virtual scrolling and signals. Handle thousands of items efficiently with reactive state management.

Loading Spinner Control

Implement elegant loading states with signals. Show and hide loading indicators based on reactive application state.

Read-Only Signal Protection

Secure your signals with read-only patterns. Use .asReadonly() to prevent unauthorized modifications while sharing state.