๐ฏ Angular Signals Examples
September 17, 2025 ยท View on GitHub
๐ฏ Angular Signals Examples
๐ A comprehensive collection of Angular Signals examples showcasing modern reactive programming
Master Angular's revolutionary signal system with 50+ real-world examples covering signals, linked signals, resource API, and defer blocks
๐ Category Documentation
Each major example category has its own dedicated README with detailed examples and explanations:
- Signal Examples โ Core signal patterns and usage (16 examples)
- Linked Signal Examples โ Linked signals and computed state (9 examples)
- Defer Block Examples โ Lazy loading and performance (12 examples)
- Control Flow Examples โ @if, @for, @switch blocks (3 examples)
- Resource API Examples โ Data fetching and resource patterns (9 examples)
- Advanced Examples โ Real-world and advanced patterns (13 examples, including collaborative list, undo/redo, zoneless change detection demo, modal service, preloading, and custom toggle control)
- Signal Forms Examples โ Reactive forms with signals (6 examples)
Jump into any category above to explore all the examples and details!
โก Quick Start
- Clone the repository:
git clone https://github.com/sonusindhu/angular-signals-examples.git cd angular-signals-examples - Install dependencies:
npm install - Start the development server:
The app will be running at http://localhost:4200npm start
๐ ๏ธ Development
- Build for production:
npm run build - Run unit tests:
npm test - Lint and format code:
npm run lint npm run format - Scaffold new components/services:
ng generate component my-component ng generate service my-service
For more details, see the Angular CLI documentation.
๐ค Contributing
We welcome contributions! To contribute:
- Follow the project structure:
- Place new examples in the correct category folder under
src/app/examples/(e.g.,signal,linked-signal, etc.). - Update the relevant category
README.mdwith your example and description. - Keep new features/components modular, using their own files or folders as needed.
- Place new examples in the correct category folder under
- Update documentation:
- If your change affects usage or structure, update the main or category README accordingly.
- Run lint and tests:
- Before submitting, run
npm run lintandnpm testto ensure code quality and passing tests.
- Before submitting, run
- Open a Pull Request:
- Fork the repository
- Create a feature branch (
git checkout -b feature/my-feature) - Commit your changes (
git commit -m 'Add my feature') - Push to your branch (
git push origin feature/my-feature) - Open a Pull Request with a clear description of your changes
You can help by improving documentation, adding new examples, or fixing bugs. Thank you for contributing to Angular Signals Examples!
๐ License
This project is released into the Public Domain. You can use it anywhere, for any purpose, without any restrictions.
๐ Show Your Support
If this project helped you, please consider giving it a โญ!
Made with โค๏ธ by Sonu Sindhu