add cookies signal demo

angular · milomg · Jun 16, 2025 · Jun 6, 2025 · Jun 6, 2025 · May 7, 2025
commit fd16b849ba9283730d030a9a0fcbb2008c6027b6
diff --git a/devtools/src/app/demo-app/BUILD.bazel b/devtools/src/app/demo-app/BUILD.bazel
@@ -40,6 +40,7 @@ sass_binary(
 ng_project(
     name = "demo-app",
     srcs = [
+        "cookies.component.ts",
         "demo-app.component.ts",
         "demo-app.routes.ts",
         "heavy.component.ts",

diff --git a/devtools/src/app/demo-app/cookies.component.ts b/devtools/src/app/demo-app/cookies.component.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component, signal, computed} from '@angular/core';
+
+@Component({
+  selector: 'app-cookies',
+  template: `
+    <h2>Cookie recipe</h2>
+
+    <label>
+    # of cookies:
+    <input type="range" min="10" max="100" step="10" [value]="count()" (input)="update($event)" />
+    {{ count() }}
+    </label>
+
+    <p>Butter: {{ butter() }} cup(s)</p>
+    <p>Sugar: {{ sugar() }} cup(s)</p>
+    <p>Flour: {{ flour() }} cup(s)</p>
+  `,
+})
+export class CookieRecipe {
+  count = signal(10, {debugName: 'count'});
+
+  butter = computed(() => this.count() * 0.1, {debugName: 'butter'});
+  sugar = computed(() => this.count() * 0.05, {debugName: 'sugar'});
+  flour = computed(() => this.count() * 0.2, {debugName: 'flour'});
+
+  update(event: Event) {
+    const input = event.target as HTMLInputElement;
+    this.count.set(parseInt(input.value));
+  }
+}
diff --git a/devtools/src/app/demo-app/demo-app.component.html b/devtools/src/app/demo-app/demo-app.component.html
@@ -3,3 +3,4 @@
 <app-heavy></app-heavy>
 <div #elementReference>HTMLElement</div>
 <app-sample-properties></app-sample-properties>
+<app-cookies />
diff --git a/devtools/src/app/demo-app/demo-app.component.ts b/devtools/src/app/demo-app/demo-app.component.ts
@@ -22,14 +22,15 @@ import {ZippyComponent} from './zippy.component';
 import {HeavyComponent} from './heavy.component';
 import {SamplePropertiesComponent} from './sample-properties.component';
 import {RouterOutlet} from '@angular/router';
+import {CookieRecipe} from './cookies.component';
 
 @Component({
   selector: 'app-demo-component',
   templateUrl: './demo-app.component.html',
   styleUrls: ['./demo-app.component.scss'],
   encapsulation: ViewEncapsulation.None,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [HeavyComponent, SamplePropertiesComponent, RouterOutlet],
+  imports: [HeavyComponent, SamplePropertiesComponent, RouterOutlet, CookieRecipe],
 })
 export class DemoAppComponent {
   readonly zippy = viewChild(ZippyComponent);