https://github.com/sonusindhu/angular-signals-examples
This repo is to explains Angular signals and real time examples how to create and update signals, use effects, convert from observable and create computed values. It includes the angular signal demo with multiple scenario...
https://github.com/sonusindhu/angular-signals-examples
angular angular-material angular-signals angular-signals-demo angular16 angular17 angular18 angular2 rxjs signals typescript
Last synced: 4 months ago
JSON representation
This repo is to explains Angular signals and real time examples how to create and update signals, use effects, convert from observable and create computed values. It includes the angular signal demo with multiple scenario...
- Host: GitHub
- URL: https://github.com/sonusindhu/angular-signals-examples
- Owner: sonusindhu
- Created: 2023-04-12T13:41:33.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-04-05T16:05:56.000Z (10 months ago)
- Last Synced: 2025-04-05T17:20:20.736Z (10 months ago)
- Topics: angular, angular-material, angular-signals, angular-signals-demo, angular16, angular17, angular18, angular2, rxjs, signals, typescript
- Language: TypeScript
- Homepage: https://angular-signal-examples.netlify.app
- Size: 1.54 MB
- Stars: 37
- Watchers: 2
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎯 Angular Signals Examples
[](https://angular.io/)
[](https://www.typescriptlang.org/)
[](https://angular-signal-examples.netlify.app/)
[](http://unlicense.org/)
### 🚀 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](https://angular-signal-examples.netlify.app/)**
---
## 📚 Category Documentation
Each major example category has its own dedicated README with detailed examples and explanations:
- [Signal Examples](src/app/examples/signal/README.md) — Core signal patterns and usage (**16 examples**)
- [Linked Signal Examples](src/app/examples/linked-signal/README.md) — Linked signals and computed state (**9 examples**)
- [Defer Block Examples](src/app/examples/defer-block/README.md) — Lazy loading and performance (**12 examples**)
- [Control Flow Examples](src/app/examples/control-flow/README.md) — @if, @for, @switch blocks (**3 examples**)
- [Resource API Examples](src/app/examples/resource-api/README.md) — Data fetching and resource patterns (**9 examples**)
- [Advanced Examples](src/app/examples/advanced/README.md) — 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](src/app/examples/signal-form/README.md) — Reactive forms with signals (**6 examples**)
Jump into any category above to explore all the examples and details!
---
## ⚡ Quick Start
1. **Clone the repository:**
```bash
git clone https://github.com/sonusindhu/angular-signals-examples.git
cd angular-signals-examples
```
2. **Install dependencies:**
```bash
npm install
```
3. **Start the development server:**
```bash
npm start
```
The app will be running at [http://localhost:4200](http://localhost:4200)
---
## 🛠️ Development
- **Build for production:**
```bash
npm run build
```
- **Run unit tests:**
```bash
npm test
```
- **Lint and format code:**
```bash
npm run lint
npm run format
```
- **Scaffold new components/services:**
```bash
ng generate component my-component
ng generate service my-service
```
For more details, see the [Angular CLI documentation](https://angular.io/cli).
---
## 🤝 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](#-angular-signals-examples)**
Made with ❤️ by [Sonu Sindhu](https://github.com/sonusindhu)
---