diff --git a/apps/signal/43-signal-input/src/app/user.component.ts b/apps/signal/43-signal-input/src/app/user.component.ts index 553042ebb..5f6859839 100644 --- a/apps/signal/43-signal-input/src/app/user.component.ts +++ b/apps/signal/43-signal-input/src/app/user.component.ts @@ -2,8 +2,9 @@ import { TitleCasePipe } from '@angular/common'; import { ChangeDetectionStrategy, Component, - Input, - OnChanges, + computed, + input, + numberAttribute, } from '@angular/core'; type Category = 'Youth' | 'Junior' | 'Open' | 'Senior'; @@ -18,23 +19,18 @@ const ageToCategory = (age: number): Category => { selector: 'app-user', imports: [TitleCasePipe], template: ` - {{ fullName | titlecase }} plays tennis in the {{ category }} category!! + {{ fullName() | titlecase }} plays tennis in the {{ category() }} category!! `, host: { class: 'text-xl text-green-800', }, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class UserComponent implements OnChanges { - @Input({ required: true }) name!: string; - @Input() lastName?: string; - @Input() age?: string; +export class UserComponent { + readonly name = input.required(); + readonly lastName = input(''); + readonly age = input(0, { transform: numberAttribute }); - fullName = ''; - category: Category = 'Junior'; - - ngOnChanges(): void { - this.fullName = `${this.name} ${this.lastName ?? ''}`; - this.category = ageToCategory(Number(this.age)); - } + fullName = computed(() => `${this.name()} ${this.lastName() ?? ''}`); + category = computed(() => ageToCategory(this.age())); }