README.md

🎯 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

🌟 View Live Demo

---

📚 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

1. Clone the repository:

   git clone https://github.com/sonusindhu/angular-signals-examples.git
   cd angular-signals-examples

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

   The app will be running at http://localhost:4200

---

🛠️ 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.md with your example and description.
  • Keep new features/components modular, using their own files or folders as needed.
• 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 lint and npm test to ensure code quality and passing tests.
• Open a Pull Request:
  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/my-feature)
  3. Commit your changes (git commit -m 'Add my feature')
  4. Push to your branch (git push origin feature/my-feature)
  5. 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 ⭐!

⬆ Back to Top

Made with ❤️ by Sonu Sindhu

---