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..1b736dcdb 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
@@ -1,5 +1,10 @@
import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ inject,
+} from '@angular/core';
import { UserStore } from './user.service';
@Component({
@@ -7,14 +12,29 @@ import { UserStore } from './user.service';
template: `
Address:
-
Street: {{ userService.user().address.street }}
-
ZipCode: {{ userService.user().address.zipCode }}
-
City: {{ userService.user().address.city }}
+
Street: {{ address().street }}
+
ZipCode: {{ address().zipCode }}
+
City: {{ address().city }}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CDFlashingDirective],
})
export class AddressComponent {
- userService = inject(UserStore);
+ private readonly userService = inject(UserStore);
+
+ address = computed(
+ () => {
+ const user = this.userService.user();
+
+ return {
+ street: user.address.street,
+ zipCode: user.address.zipCode,
+ city: user.address.city,
+ };
+ },
+ {
+ equal: (prev, next) => JSON.stringify(prev) === JSON.stringify(next),
+ },
+ );
}
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..829ab62fe 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
@@ -1,5 +1,10 @@
import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ inject,
+} from '@angular/core';
import { UserStore } from './user.service';
@Component({
@@ -7,13 +12,23 @@ import { UserStore } from './user.service';
template: `
Job:
-
title: {{ userService.user().title }}
-
salary: {{ userService.user().salary }}
+
title: {{ job().title }}
+
salary: {{ job().salary }}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CDFlashingDirective],
})
export class JobComponent {
- userService = inject(UserStore);
+ private readonly userService = inject(UserStore);
+
+ job = computed(
+ () => ({
+ title: this.userService.user().title,
+ salary: this.userService.user().salary,
+ }),
+ {
+ equal: (prev, next) => JSON.stringify(prev) === JSON.stringify(next),
+ },
+ );
}
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..4fd6abbd7 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
@@ -1,17 +1,24 @@
import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ inject,
+} from '@angular/core';
import { UserStore } from './user.service';
@Component({
selector: 'name',
template: `
- Name: {{ userService.user().name }}
+ Name: {{ name() }}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CDFlashingDirective],
})
export class NameComponent {
- userService = inject(UserStore);
+ private readonly userService = inject(UserStore);
+
+ name = computed(() => this.userService.user().name);
}
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..ffdbd55cc 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
@@ -1,17 +1,24 @@
import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ inject,
+} from '@angular/core';
import { UserStore } from './user.service';
@Component({
selector: 'note',
template: `
- Note: {{ userService.user().note }}
+ Note: {{ note() }}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CDFlashingDirective],
})
export class NoteComponent {
- userService = inject(UserStore);
+ private readonly userService = inject(UserStore);
+
+ note = computed(() => this.userService.user().note);
}