{"id":15024639,"url":"https://github.com/sonusindhu/angular-signals-examples","last_synced_at":"2025-10-17T20:11:14.872Z","repository":{"id":161046604,"uuid":"626952272","full_name":"sonusindhu/angular-signals-examples","owner":"sonusindhu","description":"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...","archived":false,"fork":false,"pushed_at":"2025-04-05T16:05:56.000Z","size":1611,"stargazers_count":37,"open_issues_count":0,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T17:20:20.736Z","etag":null,"topics":["angular","angular-material","angular-signals","angular-signals-demo","angular16","angular17","angular18","angular2","rxjs","signals","typescript"],"latest_commit_sha":null,"homepage":"https://angular-signal-examples.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonusindhu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-12T13:41:33.000Z","updated_at":"2025-04-05T16:06:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"90baa39c-6121-4138-8760-ef177ce29d0f","html_url":"https://github.com/sonusindhu/angular-signals-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonusindhu%2Fangular-signals-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonusindhu%2Fangular-signals-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonusindhu%2Fangular-signals-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonusindhu%2Fangular-signals-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonusindhu","download_url":"https://codeload.github.com/sonusindhu/angular-signals-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248529212,"owners_count":21119463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","angular-signals","angular-signals-demo","angular16","angular17","angular18","angular2","rxjs","signals","typescript"],"created_at":"2024-09-24T20:00:40.616Z","updated_at":"2025-10-17T20:11:14.850Z","avatar_url":"https://github.com/sonusindhu.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n# 🎯 Angular Signals Examples\n\n[![Angular](https://img.shields.io/badge/Angular-20+-DD0031?style=for-the-badge\u0026logo=angular\u0026logoColor=white)](https://angular.io/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Live Demo](https://img.shields.io/badge/Live-Demo-00D9FF?style=for-the-badge\u0026logo=netlify\u0026logoColor=white)](https://angular-signal-examples.netlify.app/)\n[![License: Unlicense](https://img.shields.io/badge/License-Unlicense-blue?style=for-the-badge)](http://unlicense.org/)\n\n### 🚀 A comprehensive collection of Angular Signals examples showcasing modern reactive programming\n\n*Master Angular's revolutionary signal system with 50+ real-world examples covering signals, linked signals, resource API, and defer blocks*\n\n**[🌟 View Live Demo](https://angular-signal-examples.netlify.app/)**\n\n\u003c/div\u003e\n\n---\n\n## 📚 Category Documentation\n\nEach major example category has its own dedicated README with detailed examples and explanations:\n\n- [Signal Examples](src/app/examples/signal/README.md) — Core signal patterns and usage (**16 examples**)\n- [Linked Signal Examples](src/app/examples/linked-signal/README.md) — Linked signals and computed state (**9 examples**)\n- [Defer Block Examples](src/app/examples/defer-block/README.md) — Lazy loading and performance (**12 examples**)\n- [Control Flow Examples](src/app/examples/control-flow/README.md) — @if, @for, @switch blocks (**3 examples**)\n- [Resource API Examples](src/app/examples/resource-api/README.md) — Data fetching and resource patterns (**9 examples**)\n- [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)\n- [Signal Forms Examples](src/app/examples/signal-form/README.md) — Reactive forms with signals (**6 examples**)\n\nJump into any category above to explore all the examples and details!\n\n---\n\n## ⚡ Quick Start\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/sonusindhu/angular-signals-examples.git\n   cd angular-signals-examples\n   ```\n2. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n3. **Start the development server:**\n   ```bash\n   npm start\n   ```\n   The app will be running at [http://localhost:4200](http://localhost:4200)\n\n---\n\n## 🛠️ Development\n\n- **Build for production:**\n  ```bash\n  npm run build\n  ```\n- **Run unit tests:**\n  ```bash\n  npm test\n  ```\n- **Lint and format code:**\n  ```bash\n  npm run lint\n  npm run format\n  ```\n- **Scaffold new components/services:**\n  ```bash\n  ng generate component my-component\n  ng generate service my-service\n  ```\n\nFor more details, see the [Angular CLI documentation](https://angular.io/cli).\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! To contribute:\n\n- **Follow the project structure:**\n  - Place new examples in the correct category folder under `src/app/examples/` (e.g., `signal`, `linked-signal`, etc.).\n  - Update the relevant category `README.md` with your example and description.\n  - Keep new features/components modular, using their own files or folders as needed.\n- **Update documentation:**\n  - If your change affects usage or structure, update the main or category README accordingly.\n- **Run lint and tests:**\n  - Before submitting, run `npm run lint` and `npm test` to ensure code quality and passing tests.\n- **Open a Pull Request:**\n  1. Fork the repository\n  2. Create a feature branch (`git checkout -b feature/my-feature`)\n  3. Commit your changes (`git commit -m 'Add my feature'`)\n  4. Push to your branch (`git push origin feature/my-feature`)\n  5. Open a Pull Request with a clear description of your changes\n\nYou can help by improving documentation, adding new examples, or fixing bugs. Thank you for contributing to Angular Signals Examples!\n\n---\n\n## 📄 License\n\nThis project is released into the **Public Domain**. You can use it anywhere, for any purpose, without any restrictions.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n### 🌟 Show Your Support\n\nIf this project helped you, please consider giving it a ⭐!\n\n**[⬆ Back to Top](#-angular-signals-examples)**\n\nMade with ❤️ by [Sonu Sindhu](https://github.com/sonusindhu)\n\n\u003c/div\u003e\n\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonusindhu%2Fangular-signals-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonusindhu%2Fangular-signals-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonusindhu%2Fangular-signals-examples/lists"}