bindings (<, @, &, =) en Angular moderno

Los cuatro símbolos de binding se convierten en tres funciones: input() para datos de entrada, output() para eventos de salida, y model() para binding bidireccional.

Antes · AngularJS

app.component('userCard', {
  bindings: {
    user: '<',
    title: '@',
    onSelect: '&',
    value: '='
  },
  templateUrl: 'user-card.html'
});

Después · Angular

export class UserCardComponent {
  user = input.required<User>();   // '<'
  title = input('');               // '@'
  select = output<User>();         // '&'
  value = model('');               // '='
}

Qué cambia

'<' y '@' pasan a ser input(); el padre decide si pasa un string literal o una expresión enlazada.
Los callbacks '&' pasan a ser eventos output() que el padre escucha con (select).
Los bindings '=' pasan a ser model(), que el padre usa con [(value)].

Consejo de migración. La mayoría de los bindings '=' del código viejo en realidad son de una sola vía. Convertirlos a input() durante la migración elimina toda una clase de errores.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn