From ffd4407a41aa4e108b539752e11ea4b768942512 Mon Sep 17 00:00:00 2001
From: Milo <mmighdoll@google.com>
Date: Wed, 7 May 2025 19:13:41 +0000
Subject: [PATCH] refactor(devtools): add cookies signal demo (#62749)

add a new component that includes a small signal graph and explicitly calls .set on a signal.

PR Close #62749
---
 devtools/src/app/demo-app/BUILD.bazel         |  1 +
 .../src/app/demo-app/cookies.component.ts     | 38 +++++++++++++++++++
 .../src/app/demo-app/demo-app.component.html  |  1 +
 .../src/app/demo-app/demo-app.component.ts    |  9 ++++-
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 devtools/src/app/demo-app/cookies.component.ts

diff --git a/devtools/src/app/demo-app/BUILD.bazel b/devtools/src/app/demo-app/BUILD.bazel
index 61aed815a05..a78fe0903c5 100644
--- a/devtools/src/app/demo-app/BUILD.bazel
+++ b/devtools/src/app/demo-app/BUILD.bazel
@@ -39,6 +39,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
new file mode 100644
index 00000000000..55bf135dd98
--- /dev/null
+++ 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
index 6499a50d759..666b231148d 100644
--- a/devtools/src/app/demo-app/demo-app.component.html
+++ b/devtools/src/app/demo-app/demo-app.component.html
@@ -4,3 +4,4 @@
 <div #elementReference>HTMLElement</div>
 <div *appStructural>Test Structural Directive</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
index 0f80c8e399c..c5d01e7c33e 100644
--- a/devtools/src/app/demo-app/demo-app.component.ts
+++ b/devtools/src/app/demo-app/demo-app.component.ts
@@ -26,6 +26,7 @@ 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';
 
 // structual directive example
 @Directive({
@@ -50,7 +51,13 @@ export class StructuralDirective {
   styleUrls: ['./demo-app.component.scss'],
   encapsulation: ViewEncapsulation.None,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [StructuralDirective, HeavyComponent, SamplePropertiesComponent, RouterOutlet],
+  imports: [
+    StructuralDirective,
+    HeavyComponent,
+    SamplePropertiesComponent,
+    RouterOutlet,
+    CookieRecipe,
+  ],
 })
 export class DemoAppComponent {
   readonly zippy = viewChild(ZippyComponent);