Angular 19: legado vs. señales — mentalidad de migración
easy⏱ 5 mincourseangular
La forma antigua: decoradores, Zone.js, directivas estructurales
El Angular anterior a las señales se apoya en Zone.js parcheando APIs asíncronas (setTimeout, eventos del DOM, promesas) para saber CUÁNDO revisar todo el árbol de componentes en busca de cambios — algo más burdo y menos predecible que una señal que le dice a Angular EXACTAMENTE qué cambió. @Input()/@Output() y *ngIf/*ngFor son las APIs de decorador de clase/directiva estructural de esa época; la inyección por parámetro de constructor es el estilo de DI clásico. Este fragmento es solo ilustrativo — léelo, no lo ejecutes.
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-user-list',
standalone: true,
imports: [CommonModule],
template: `
<ul *ngIf="users.length > 0; else empty">
<li *ngFor="let user of users" (click)="select.emit(user)">
{{ user.name }}
</li>
</ul>
<ng-template #empty><p>No users</p></ng-template>
`,
})
export class UserListComponent {
@Input() users: User[] = [];
@Output() select = new EventEmitter<User>();
// Constructor-parameter injection — still fully supported, common in
// pre-inject() codebases and libraries that predate Angular 14.
constructor(private http: HttpClient) {}
}
Migra de forma incremental — ambos estilos conviven
No necesitas reescribir toda una aplicación de una sola vez. Un componente que usa @Input() puede ser padre O hijo directo de un componente que usa input()/model() — a Angular no le importa. Migra archivo por archivo, componente por componente, cuando te resulte conveniente.