feat: signal input challenge

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

@@ -1,17 +1,18 @@
-import { JsonPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { UserComponent } from './user.component';
 
 @Component({
   standalone: true,
-  imports: [UserComponent, JsonPipe],
+  imports: [UserComponent],
   selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="flex flex-col gap-3">
       <div class="flex gap-2 ">
         Name:
         <input #name class="border" />
-        @if (showUser && !name.value) {
+
+        @if (showUser() && !name.value) {
           <div class="text-sm text-red-500">name required</div>
         }
       </div>
@@ -24,12 +25,13 @@ import { UserComponent } from './user.component';
         <input type="number" #age class="border" />
       </div>
       <button
-        (click)="showUser = true"
+        (click)="showUser.set(true)"
         class="w-fit rounded-md border border-blue-500 bg-blue-200 px-4 py-2">
         Submit
       </button>
     </div>
-    @if (showUser && !!name.value) {
+
+    @if (showUser() && !!name.value) {
       <app-user
         [name]="name.value"
         [lastName]="lastName.value"
@@ -41,5 +43,5 @@ import { UserComponent } from './user.component';
   },
 })
 export class AppComponent {
-  showUser = false;
+  readonly showUser = signal(false);
 }

apps/signal/43-signal-input/src/app/models.ts

@@ -0,0 +1,8 @@
+export type User = {
+  name: string;
+  lastName?: string;
+  age?: number;
+  category?: Category;
+};
+
+export type Category = 'Youth' | 'Junior' | 'Open' | 'Senior';

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

@@ -2,40 +2,28 @@ import { TitleCasePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
-  OnChanges,
+  computed,
+  input,
 } from '@angular/core';
-
-type Category = 'Youth' | 'Junior' | 'Open' | 'Senior';
-const ageToCategory = (age: number): Category => {
-  if (age < 10) return 'Youth';
-  else if (age < 18) return 'Junior';
-  else if (age < 35) return 'Open';
-  return 'Senior';
-};
+import { ageToCategory } from './utils';
 
 @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 {
+  readonly name = input.required<string>();
+  readonly lastName = input<string>('');
+  readonly age = input<string>('');
 
-  ngOnChanges(): void {
-    this.fullName = `${this.name} ${this.lastName ?? ''}`;
-    this.category = ageToCategory(Number(this.age) ?? 0);
-  }
+  readonly fullName = computed(() => `${this.name()} ${this.lastName() ?? ''}`);
+  readonly category = computed(() => ageToCategory(Number(this.age()) ?? 0));
 }

apps/signal/43-signal-input/src/app/utils.ts

@@ -0,0 +1,19 @@
+import { Category } from './models';
+
+export const ageToCategory = (age: number): Category => {
+  if (age < 0 || !Number.isInteger(age)) {
+    throw new Error('Age must be a positive integer');
+  }
+
+  const categoryRanges: { [key: number]: Category } = {
+    10: 'Youth',
+    18: 'Junior',
+    35: 'Open',
+  };
+
+  const threshold = Object.keys(categoryRanges)
+    .map(Number)
+    .find((limit) => age < limit);
+
+  return threshold ? categoryRanges[threshold] : 'Senior';
+};

apps/signal/43-signal-input/src/main.ts

@@ -1,7 +1,4 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
-import { appConfig } from './app/app.config';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent).catch((err) => console.error(err));