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

@@ -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",

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));
+  }
+}

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 />

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);