feat: convert plain inputs to signal inputs with transform

Author: mauwalB

apps/signal/43-signal-input/src/app/user.component.ts

@@ -2,8 +2,8 @@ import { TitleCasePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
-  OnChanges,
+  computed,
+  input,
 } from '@angular/core';
 
 type Category = 'Youth' | 'Junior' | 'Open' | 'Senior';
@@ -14,28 +14,28 @@ const ageToCategory = (age: number): Category => {
   return 'Senior';
 };
 
+function parseAge(age: string | undefined): number {
+  if (!age) return 0;
+  return +age;
+}
+
 @Component({
   selector: 'app-user',
   standalone: true,
   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;
-
-  fullName = '';
-  category: Category = 'Junior';
+export class UserComponent {
+  name = input.required<string>();
+  lastName = input<string>();
+  age = input(0, { transform: parseAge });
 
-  ngOnChanges(): void {
-    this.fullName = `${this.name} ${this.lastName ?? ''}`;
-    this.category = ageToCategory(Number(this.age) ?? 0);
-  }
+  fullName = computed(() => `${this.name()} ${this.lastName() ?? ''}`);
+  category = computed(() => ageToCategory(this.age() ?? 0));
 }