feat: answer:53 big signal performance

Author: WhoisBsa

apps/signal/53-big-signal-performance/src/app/address.component.ts

@@ -7,9 +7,9 @@ import { UserStore } from './user.service';
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
       Address:
-      <div>Street: {{ userService.user().address.street }}</div>
-      <div>ZipCode: {{ userService.user().address.zipCode }}</div>
-      <div>City: {{ userService.user().address.city }}</div>
+      <div>Street: {{ userService.user.address().street }}</div>
+      <div>ZipCode: {{ userService.user.address().zipCode }}</div>
+      <div>City: {{ userService.user.address().city }}</div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/job.component.ts

@@ -7,8 +7,8 @@ import { UserStore } from './user.service';
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
       Job:
-      <div>title: {{ userService.user().title }}</div>
-      <div>salary: {{ userService.user().salary }}</div>
+      <div>title: {{ userService.user.title() }}</div>
+      <div>salary: {{ userService.user.salary() }}</div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/name.component.ts

@@ -6,7 +6,7 @@ import { UserStore } from './user.service';
   selector: 'name',
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
-      Name: {{ userService.user().name }}
+      Name: {{ userService.user.name() }}
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/note.component.ts

@@ -6,7 +6,7 @@ import { UserStore } from './user.service';
   selector: 'note',
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
-      Note: {{ userService.user().note }}
+      Note: {{ userService.user.note() }}
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

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

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