8000 add cookies signal demo · angular/angular@0e21494 · GitHub
[go: up one dir, main page]
Skip to content
8000

Commit 0e21494

Browse files
milomgmilomg
committed
add cookies signal demo
1 parent d672215 commit 0e21494

File tree

4 files changed

+34
-1
lines changed

4 files changed

+34
-1
lines changed

‎devtools/src/app/demo-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ sass_binary(
4040
ng_project(
4141
name = "demo-app",
4242
srcs = [
43+
"cookies.component.ts",
4344
"demo-app.component.ts",
4445
"demo-app.routes.ts",
4546
"heavy.component.ts",

‎devtools/src/app/demo-app/cookies.component.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Component, signal, computed} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-cookies',
5+
template: `
6+
<h2>Cookie recipe</h2>
7+
8+
<label>
9+
# of cookies:
10+
<input type="range" min="10" max="100" step="10" [value]="count()" (input)="update($event)" />
11+
{{ count() }}
12+
</label>
13+
14+
<p>Butter: {{ butter() }} cup(s)</p>
15+
<p>Sugar: {{ sugar() }} cup(s)</p>
16+
<p>Flour: {{ flour() }} cup(s)</p>
17+
`,
18+
})
19+
export class CookieRecipe {
20+
count = signal(10, {debugName: 'count'});
21+
22+
butter = computed(() => this.count() * 0.1, {debugName: 'butter'});
23+
sugar = computed(() => this.count() * 0.05, {debugName: 'sugar'});
24+
flour = computed(() => this.count() * 0.2, {debugName: 'flour'});
25+
26+
update(event: Event) {
27+
const input = event.target as HTMLInputElement;
28+
this.count.set(parseInt(input.value));
29+
}
30+
}

‎devtools/src/app/demo-app/demo-app.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
<app-heavy></app-heavy>
44
<div #elementReference>HTMLElement</div>
55
<app-sample-properties></app-sample-properties>
6+
<app-cookies />

‎devtools/src/app/demo-app/demo-app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,15 @@ import {ZippyComponent} from './zippy.component';
2222
import {HeavyComponent} from './heavy.component';
2323
import {SamplePropertiesComponent} from './sample-properties.component';
2424
import {RouterOutlet} from '@angular/router';
25+
import { CookieRecipe } from './cookies.component';
2526

2627
@Component({
2728
selector: 'app-demo-component',
2829
templateUrl: './demo-app.component.html',
2930
styleUrls: ['./demo-app.component.scss'],
3031
encapsulation: ViewEncapsulation.None,
3132
schemas: [CUSTOM_ELEMENTS_SCHEMA],
32-
imports: [HeavyComponent, SamplePropertiesComponent, RouterOutlet],
33+
imports: [HeavyComponent, SamplePropertiesComponent, RouterOutlet, CookieRecipe],
3334
})
3435
export class DemoAppComponent {
3536
readonly zippy = viewChild(ZippyComponent);

0 commit comments

Comments
 (0)
0