This section contains advanced examples for Angular signals and related features.
| # | Example | Key Concepts | Description | Live Demo |
|---|---|---|---|---|
| 1 | Signal-based HTTP Resource | Signals, resource(), HTTP, error handling | Modern HTTP data fetching with signals | 🔗 Demo |
| 2 | HTTP Caching with shareReplay | RxJS shareReplay, HTTP caching, signals, refresh | Efficient HTTP caching using RxJS shareReplay and signals | 🔗 Demo |
| 3 | ng-template: Real-World Use Cases | ng-template, context, outlets, custom directives, dynamic content | Comprehensive demo of advanced ng-template patterns | 🔗 Demo |
| 4 | Signal-based Disable Reactive Form | Signals, reactive forms, custom directive | Control the disabled state of a reactive form using a signal and directive | 🔗 Demo |
| 5 | Auto-Save Form Directive | Signals, reactive forms, throttle, LocalStorage, API, error handling | Reusable directive for auto-saving form data with status and retries | 🔗 Demo |
| 6 | Directive Composition with hostDirectives | hostDirectives, Angular 17+, composition, standalone | Compose Tooltip and Highlight directives in a standalone component | 🔗 Demo |
| 7 | Track Angular Performance | ApplicationRef.tick, change detection, zoneless, manual tick | Track and visualize Angular’s change detection cycles in zoneless mode | 🔗 Demo |
| 8 | Two-way Currency Converter | Signals, two-way binding, setter function, input, currency conversion | Live USD ($) ↔ EUR (€) converter using signals and two-way binding | 🔗 Demo |
| 9 | Undo/Redo State Management | Signals, undo/redo stack, form state, reactive UI | Implement undo/redo stack for a form using Angular signals | 🔗 Demo |
| 10 | Collaborative List (Signals + Storage Event) | Signals, storage event, RxJS, real-time sync | Real-time collaborative list synced across tabs using signals and storage event | 🔗 Demo |
| 11 | Modal Service with ViewContainerRef | Modal, service, ViewContainerRef, dynamic component | Open a modal using a service and ViewContainerRef. Demonstrates dynamic component creation and service-driven modals. | 🔗 Demo |
| 12 | On-Demand Preloading via Service & Custom Strategy | PreloadingStrategy, service, routing, signals | Preload modules only when triggered (e.g., on hover) using a service and custom PreloadingStrategy | 🔗 Demo |
| 13 | Custom Toggle Form Control (ControlValueAccessor) | ControlValueAccessor, forms, signals, reactive & template-driven, disabled state | Fully reactive, typed, and form-friendly custom toggle control. Works with both reactive and template-driven forms, supports disabled state. | 🔗 Demo |