diff --git a/apps/signal/53-big-signal-performance/src/app/address.component.ts b/apps/signal/53-big-signal-performance/src/app/address.component.ts
index f894d697e..9c9b7e0ca 100644
--- a/apps/signal/53-big-signal-performance/src/app/address.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/address.component.ts
@@ -7,9 +7,9 @@ import { UserStore } from './user.service';
template: `
Address:
-
Street: {{ userService.user().address.street }}
-
ZipCode: {{ userService.user().address.zipCode }}
-
City: {{ userService.user().address.city }}
+
Street: {{ userService.user.address().street }}
+
ZipCode: {{ userService.user.address().zipCode }}
+
City: {{ userService.user.address().city }}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/apps/signal/53-big-signal-performance/src/app/job.component.ts b/apps/signal/53-big-signal-performance/src/app/job.component.ts
index d3186fc9f..c64ac8b88 100644
--- a/apps/signal/53-big-signal-performance/src/app/job.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/job.component.ts
@@ -7,8 +7,8 @@ import { UserStore } from './user.service';
template: `
Job:
-
title: {{ userService.user().title }}
-
salary: {{ userService.user().salary }}
+
title: {{ userService.user.title() }}
+
salary: {{ userService.user.salary() }}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/apps/signal/53-big-signal-performance/src/app/name.component.ts b/apps/signal/53-big-signal-performance/src/app/name.component.ts
index f93b5675a..7c6aeb848 100644
--- a/apps/signal/53-big-signal-performance/src/app/name.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/name.component.ts
@@ -6,7 +6,7 @@ import { UserStore } from './user.service';
selector: 'name',
template: `
- Name: {{ userService.user().name }}
+ Name: {{ userService.user.name() }}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/apps/signal/53-big-signal-performance/src/app/note.component.ts b/apps/signal/53-big-signal-performance/src/app/note.component.ts
index dd0033962..e659fdf03 100644
--- a/apps/signal/53-big-signal-performance/src/app/note.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/note.component.ts
@@ -6,7 +6,7 @@ import { UserStore } from './user.service';
selector: 'note',
template: `
- Note: {{ userService.user().note }}
+ Note: {{ userService.user.note() }}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/apps/signal/53-big-signal-performance/src/app/user-form.component.ts b/apps/signal/53-big-signal-performance/src/app/user-form.component.ts
index d0f2164ce..01f12c1ad 100644
--- a/apps/signal/53-big-signal-performance/src/app/user-form.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/user-form.component.ts
@@ -64,36 +64,40 @@ export class UserFormComponent {
userStore = inject(UserStore);
form = new FormGroup({
- name: new FormControl(this.userStore.user().name, { nonNullable: true }),
- street: new FormControl(this.userStore.user().address.street, {
+ name: new FormControl(this.userStore.user.name(), { nonNullable: true }),
+ street: new FormControl(this.userStore.user.address().street, {
nonNullable: true,
}),
- zipCode: new FormControl(this.userStore.user().address.zipCode, {
+ zipCode: new FormControl(this.userStore.user.address().zipCode, {
nonNullable: true,
}),
- city: new FormControl(this.userStore.user().address.city, {
+ city: new FormControl(this.userStore.user.address().city, {
nonNullable: true,
}),
- note: new FormControl(this.userStore.user().note, { nonNullable: true }),
- title: new FormControl(this.userStore.user().title, { nonNullable: true }),
- salary: new FormControl(this.userStore.user().salary, {
+ note: new FormControl(this.userStore.user.note(), { nonNullable: true }),
+ title: new FormControl(this.userStore.user.title(), { nonNullable: true }),
+ salary: new FormControl(this.userStore.user.salary(), {
nonNullable: true,
}),
});
submit() {
- this.userStore.user.update((u) => ({
- ...u,
- name: this.form.getRawValue().name,
- address: {
- ...u.address,
- street: this.form.getRawValue().street,
- zipCode: this.form.getRawValue().zipCode,
- city: this.form.getRawValue().city,
- },
- note: this.form.getRawValue().note,
- title: this.form.getRawValue().title,
- salary: this.form.getRawValue().salary,
- }));
+ const formValues = this.form.getRawValue();
+
+ this.userStore.user.name.set(formValues.name);
+ this.userStore.user.title.set(formValues.title);
+ this.userStore.user.salary.set(formValues.salary);
+
+ const address = {
+ street: formValues.street,
+ zipCode: formValues.zipCode,
+ city: formValues.city,
+ };
+
+ if (
+ JSON.stringify(address) !== JSON.stringify(this.userStore.user.address())
+ ) {
+ this.userStore.user.address.set(address);
+ }
}
}
diff --git a/apps/signal/53-big-signal-performance/src/app/user.service.ts b/apps/signal/53-big-signal-performance/src/app/user.service.ts
index 4b3b7c512..1447c81f7 100644
--- a/apps/signal/53-big-signal-performance/src/app/user.service.ts
+++ b/apps/signal/53-big-signal-performance/src/app/user.service.ts
@@ -2,15 +2,15 @@ import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class UserStore {
- user = signal({
- name: 'Bob',
- address: {
+ user = {
+ name: signal('Bob'),
+ address: signal({
street: '',
zipCode: '',
city: '',
- },
- note: '',
- title: '',
- salary: 0,
- });
+ }),
+ note: signal(''),
+ title: signal(''),
+ salary: signal(0),
+ };
}