Committing the angular signals demo

Committing the angular signals demo

Author: vinoth-Kumar-S

README.md

@@ -1,2 +1,25 @@
-# angular-signals-demo
-This repository contains a sample application designed to demonstrate the usage of Angular Signals in a real-world scenario.
+# SignalDemo
+
+This repository contains a sample application designed to demonstrate the usage of Angular Signals in a real-world scenario. By building a mini e-commerce application, we explore the power of reactive programming and how Signals can simplify state management in Angular.
+
+## Concepts Covered
+
+- Introduction to Signals: Learn the basics of Signals and their role in reactive programming.
+- State Updates: Implement Signals for seamless and efficient state changes.
+- Reactive Dependencies: Demonstrate how dependent computations update automatically.
+- Optimized UI Rendering: Use Signals to improve performance by reducing unnecessary re-renders.
+
+## Why Signals?
+Angular Signals offer a clean and powerful way to manage application state and reactivity. Unlike traditional observables or services, Signals focus on:
+
+- Declarative State Updates
+- Automatic Dependency Tracking
+- Performance Optimization
+  
+This application showcases how to leverage these benefits in a real-world application.
+
+## Related blog
+
+Please provide the link to the blog here, once it is published.
+
+

angular.json

@@ -0,0 +1,98 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "signal-demo": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/signal-demo",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "signal-demo:build:production"
+            },
+            "development": {
+              "buildTarget": "signal-demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}