Advanced Examples

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