Cómo transformar propiedades de entrada en Angular: decoradores vs signals

// ⚠️ Enfoque legacy: Par de getter/setter tedioso
@Component({ ... })
export class MyButtonComponent {
  private _disabled = false;
 
  @Input()
  get disabled(): boolean {
    return this._disabled;
  }
  set disabled(value: boolean | string) {
    this._disabled = typeof value === 'boolean' ? value : value != null && `${value}` !== 'false';
  }
}

import { Component, Input, booleanAttribute, numberAttribute } from '@angular/core';
 
@Component({
  selector: 'app-user-badge',
  standalone: true,
  template: `
    <span [class.active]="isActive">User ID: {{ userId }}</span>
  `,
})
export class UserBadgeComponent {
  // Convierte <app-user-badge is-active /> o "" en true
  @Input({ transform: booleanAttribute }) isActive = false;
 
  // Convierte "42" en 42 (number), con 0 como valor por defecto
  @Input({ transform: (val: unknown) => numberAttribute(val, 0) }) userId = 0;
}

export interface Course {
  id: string;
  title: string;
  start: Date;
  description: string;
}
 
export interface SchedulerEvent {
  id: string;
  title: string;
  start: Date;
  end: Date;
  isAllDay: boolean;
}
 
function toScheduleEvents(courses: Course[]): SchedulerEvent[] {
  return (courses || []).map((course) => ({
    id: course.id,
    title: course.title,
    start: course.start,
    end: new Date(course.start.getTime() + 2 * 60 * 60 * 1000),
    isAllDay: false,
    description: course.description,
  }));
}

// calendar.component.ts (Standalone moderno y Signal Inputs)
import { Component, input, booleanAttribute } from '@angular/core';
import { Course, SchedulerEvent, toScheduleEvents } from './calendar.models';
 
@Component({
  selector: 'app-calendar',
  standalone: true,
  template: `
    <div class="calendar-wrapper">
      @if (showGrid()) {
        <p>Total Scheduled Events: {{ events().length }}</p>
 
        @for (event of events(); track event.id) {
          <div class="event-item">
            <strong>{{ event.title }}</strong> - {{ event.start | date:'shortTime' }}
          </div>
        }
      }
    </div>
  `,
})
export class CalendarComponent {
  // 1. Conversión booleana integrada con Signal inputs
  showGrid = input(true, { transform: booleanAttribute });
 
  // 2. Transformación con mapeo personalizado: quien consume pasa Course[], el componente lee SchedulerEvent[]
  events = input.required<SchedulerEvent[], Course[]>({
    transform: toScheduleEvents,
  });
}

<!-- Quien consume el componente pasa Course[] crudo y el atributo string booleano de forma limpia -->
<app-calendar [events]="myCoursesList" showGrid />