Carlos Cifuentes
AngularJS → Angular reference

bindings (<, @, &, =) in modern Angular

The four binding symbols map to three functions: input() for data in, output() for events out, and model() for two-way binding.

Before · AngularJS
app.component('userCard', {
  bindings: {
    user: '<',
    title: '@',
    onSelect: '&',
    value: '='
  },
  templateUrl: 'user-card.html'
});
After · Angular
export class UserCardComponent {
  user = input.required<User>();   // '<'
  title = input('');               // '@'
  select = output<User>();         // '&'
  value = model('');               // '='
}

What changes

  • '<' and '@' both become input(); the parent decides whether to pass a literal string or a bound expression.
  • '&' callbacks become output() events that the parent listens to with (select).
  • '=' two-way bindings become model(), used by the parent with [(value)].

Migration tip. Most '=' bindings in old code are really one-way. Converting them to input() during the migration removes a whole class of bugs.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn