Member-only story
No More @Input() + @Output(): Angular 20 Embraces Native Bindings with Signals
Angular 20 has arrived, and with it comes one of the most exciting evolutions in component communication: native inputs and outputs. But there’s more. This release also deepens Angular’s embrace of Signals, the reactive primitive introduced in Angular 16.
Now, thanks to Angular 20’s updated component model, you can build components using native bindings and Signals — without ever touching @Input() or @Output(). This combo leads to cleaner, more reactive, and more maintainable code.
In this post, we’ll break down what this means, how to use it, and why this change matters for the future of Angular development.
🚫 The Problem with @Input() and @Output()
Since Angular 2, we’ve relied on @Input() and @Output() decorators to pass data into and out of components:
@Input() title: string;
@Output() clicked = new EventEmitter<void>();While functional, these decorators have several drawbacks:
- They add boilerplate.
- They’re Angular-specific, unlike standard DOM attributes and events.
- They aren’t reactive on their own — meaning you still need RxJS or Signals for reactivity.
