Advanced Examples

HTTP Caching with interceptors

This example demonstrates the use of HTTP interceptors for caching API responses.

HTTP Caching with RxJS shareReplay

Cache HTTP requests in a service using RxJS shareReplay for efficient data reuse.

Real-World ng-template Use Cases

Explore advanced and practical uses of ng-template in Angular, including conditional rendering, template outlets, context passing, and custom structural directives.

Signal-based Disable Reactive Form

Control the disabled state of a reactive form using a signal and the disableControl directive.

Auto-Save Form Directive — Real-World Use Case

A reusable directive that auto-saves Angular form data to LocalStorage and an API, with debounce, dirty/touched state handling, and saving status.

Directive Composition with hostDirectives

Showcase of Angular 17+ hostDirectives for composing Tooltip and Highlight directives in a standalone component.

Track Angular Performance

This example shows how to override ApplicationRef.tick to log every global change detection run, explains why async operations like setInterval do not trigger ticks, and demonstrates how to manually trigger change detection for performance analysis.

Two-way / Setter pattern

Demonstrates two-way binding and setter pattern using Angular signals. Shows how to use a signal and a setter function for input fields.

Undo/Redo State Management

Implement a signal-based undo/redo stack for a form, showing how to track and revert state changes using Angular signals.

Collaborative List (Signals + Storage Event)

A real-time collaborative list using Angular signals and the browser storage event. Add, edit, or remove items and see changes sync instantly across tabs/windows—no backend required.

Modal Service with ViewContainerRef

Open a modal using a service and ViewContainerRef. Demonstrates dynamic component creation and service-driven modals.

On-Demand Preloading via Service & Custom Strategy

Preload modules only when triggered (e.g., on hover) using a service and custom PreloadingStrategy. Demonstrates bandwidth savings and modern Angular routing.

Custom Toggle Form Control (ControlValueAccessor)

A fully reactive, typed, and form-friendly custom toggle control using ControlValueAccessor. Works with both reactive and template-driven forms.