🎯 Angular Signals Examples

🚀 A comprehensive collection of Angular Signals examples showcasing modern reactive programming

Master Angular's revolutionary signal system with 40+ real-world examples covering signals, linked signals, resource API, and defer blocks

🌟 View Live Demo | 📖 Documentation | 🤝 Contribute

---

🌟 What You'll Learn

Angular Signals Modern reactive state management

Performance Defer blocks & optimization

📋 Table of Contents

• 🌟 What You'll Learn
• ⚡ Quick Start
• 🎯 Examples - Signals
• 🔗 Examples - LinkedSignal
• 📡 Examples - Resource API
• ⏳ Examples - Defer Block
• 🛠️ Development
• 🤝 Contributing
• 📄 License

🎯 Examples - Signals

🔥 16 comprehensive examples showcasing Angular's reactive signal system from basics to advanced patterns

📊 Beginner Examples (1-8)

#	Example	Description	Live Demo
1	Count Increment/Decrement	Basic signal operations	🔗 Demo
2	Auto Increment Count	Automatic signal updates	🔗 Demo
3	Update Name Using Input	Input binding with signals	🔗 Demo
4	Computed Signals	Derived state management	🔗 Demo
5	Todo List	CRUD operations with signals	🔗 Demo
6	Input with ngModel	Two-way data binding	🔗 Demo
7	Observable to Signal	Migration from RxJS	🔗 Demo
8	Signal with Side Effects	Effect management	🔗 Demo

🎨 Advanced Examples (9-16)

#	Example	Description	Live Demo
9	Simple VAT Calculator	Business logic with signals	🔗 Demo
10	Product Search	Real-time filtering	🔗 Demo
11	Input Signals	Component input patterns	🔗 Demo
12	Untracked Signal	Performance optimization	🔗 Demo
13	Shopping Cart	Complex state management	🔗 Demo
14	Virtual Scroll	Performance with large datasets	🔗 Demo
15	Loading Spinner	UI state management	🔗 Demo
16	Read Only Signals	Immutable state patterns	🔗 Demo

🔗 Examples - LinkedSignal

🔄 3 powerful examples demonstrating Angular's LinkedSignal for reactive computed state

#	Example	Description	Key Features	Live Demo
1	Default Course Quantity	Basic linked signal implementation	• Default values • Reactive updates	🔗 Demo
2	Total Price Calculator	Dynamic price calculations	• Mathematical operations • Real-time computation	🔗 Demo
3	Dynamic Pricing Engine	Advanced pricing based on user & product	• Complex business logic • Multi-factor calculations	🔗 Demo
4	Unit Converter (Celsius ↔ Fahrenheit)	Two-way unit conversion with linkedSignal	• Bi-directional binding • Real-world scenario	🔗 Demo

📡 Examples - Resource API

🌐 6 comprehensive examples showcasing Angular's new Resource API for data fetching

#	Example	API Type	Description	Live Demo
1	Basic Fetch	resource()	Simple data fetching patterns	🔗 Demo
2	List Resources	rxResource()	Working with RxJS streams	🔗 Demo
3	HTTP Resource	httpResource()	HTTP client integration	🔗 Demo
4	Random User API	resource()	Real-world API integration	🔗 Demo
5	GitHub Repositories	rxResource()	Complex data transformations	🔗 Demo
6	Random Jokes	httpResource()	Error handling & retry logic	🔗 Demo

⏳ Examples - Defer Block

⚡ 11 performance-focused examples showcasing Angular's defer blocks for lazy loading optimization

Angular's defer blocks provide declarative lazy loading for better performance by deferring the loading of parts of your template until specific conditions are met.

🔰 Basic Defer Triggers

#	Example	Trigger Type	Description	Live Demo
1	Defer on Idle	@idle	Loads when browser becomes idle	🔗 Demo
2	Defer on Interaction	@interaction	Triggers on user interaction	🔗 Demo
3	Defer on Viewport	@viewport	Loads when entering viewport	🔗 Demo
4	Defer with Timer	@timer	Time-based loading	🔗 Demo
6	Defer on Hover	@hover	Mouse hover triggers	🔗 Demo
7	Defer on Immediate	@immediate	Immediate after render	🔗 Demo

🎯 Advanced Defer Patterns

#	Example	Advanced Features	Description	Live Demo
5	Advanced Defer	Multiple triggers + Error handling	Complex condition management	🔗 Demo
8	Multiple Triggers & Prefetch	Performance optimization	Smart prefetching strategies	🔗 Demo
9	Error Handling & Retry	Robust error management	Retry mechanisms & fallbacks	🔗 Demo
10	Loading States with Timing	Professional UX	Anti-flicker timing controls	🔗 Demo
11	Real-world Dashboard	Production-ready	Complete dashboard widget	🔗 Demo

🛠️ Development

📋 Prerequisites

Requirement	Version	Description
Node.js	v20+	JavaScript runtime
Angular CLI	v20+	Angular development toolkit
TypeScript	v5.0+	Type-safe JavaScript
Knowledge	Basic	Angular & TypeScript fundamentals

🚀 Quick Commands

# Development server
npm run start          # Start dev server (http://localhost:4200)

# Building
npm run build          # Production build
npm run build:dev      # Development build

# Testing
npm run test           # Unit tests
npm run e2e            # End-to-end tests

# Code quality
npm run lint           # ESLint
npm run format         # Prettier

📝 Detailed Development Guide

Development Server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code Scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running Unit Tests

Run ng test to execute the unit tests via Karma.

Running End-to-End Tests

Run ng e2e to execute the end-to-end tests via a platform of your choice.

🤝 Contributing

We welcome contributions! Here's how you can help:

Issues Report bugs or suggest features

Pull Requests Submit code improvements

Documentation Improve examples & guides

Examples Add new signal patterns

📋 Contribution Guidelines

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is released into the Public Domain. You can use it anywhere, for any purpose, without any restrictions whatsoever.

No rights reserved. Feel free to:

• ✅ Use commercially
• ✅ Modify freely
• ✅ Distribute without attribution
• ✅ Create derivative works
• ✅ Use in proprietary software

This is educational content meant to help the Angular community learn and grow! 🚀

---

🌟 Show Your Support

If this project helped you, please consider giving it a ⭐!

⬆ Back to Top

Made with ❤️ by Sonu Sindhu