Angular 20 is out, and while it’s packed with cool stuff, there’s one feature that I’ve personally been waiting for. It’s one of those changes that just makes you breathe a sigh of relief.
It completely changes the game for creating dynamic components.
You know how it is. You need to spin up a component on the fly, and suddenly you’re wrestling with a bunch of imperative code that feels… well, a little clunky. It works, but it doesn’t feel as clean or reactive as the rest of Angular.
Let’s be real, handling two-way data binding on a dynamic component was a headache. You’d set up the input, subscribe to the output, manually sync the values, and then throw in an effect just to make sure everything stayed in sync when your signals changed. It felt like you were fighting the framework instead of working with it.
The code was messy. The APIs for inputs and outputs weren’t consistent. And it just wasn’t… reactive.
Well, that’s all changed.
A Cleaner, More Consistent Way
Starting in Angular 20, the createComponent function has a new bindings property. And it’s a game-changer.
Instead of manually setting inputs one by one, you can now declare them all in one place.
For inputs, you use a new inputBinding function. You pass it the name of the input and the value. The cool part? If that value is a signal, you just pass the signal directly. No more unwrapping it with ()! The binding function handles it for you and automatically keeps the component’s input updated whenever the signal changes.
That means you can just delete that extra effect you wrote. Gone.
There is one little “gotcha” to be aware of. Once you start using inputBinding for a component, you have to use it for all of its inputs. You can’t mix and match with the old setInput method. But honestly, it’s such a cleaner approach, you’ll want to switch everything over anyway.
Outputs get the same love with a new outputBinding function. You give it the output name and a callback function. Simple as that.
The Real Magic: Simplified Two-Way Binding
But here’s my favorite part. Remember that whole song and dance for two-way data binding? The input/output pair, the manual synchronization…
Now, it’s one line.
There’s a new twoWayBinding function. You just tell it the name of the model input and which signal you want to keep in sync. That’s it. It handles everything under the hood—the input, the Change event output, all of it.
It’s so clean. It’s what you’d expect from modern Angular.
And It Gets Even Better: Directives!
This new API also unlocks something we couldn’t do before: applying directives directly to our dynamic components when we create them.
Need to add a hover effect or a tooltip? You can now just pass the directive’s constructor right into the component configuration.
And if that directive needs its own inputs configured? No problem. You can pass in a configuration object for the directive, complete with its own bindings for its inputs. I tried it with the Angular Material matTooltip directive, and it worked perfectly. I just passed in the tooltip message and position, and boom, it was there.
This is more than just a syntax update. It’s a shift toward making dynamic components a first-class citizen, with a declarative, reactive, and predictable API that finally matches how we work with components in our templates.
So, what do you think? Are you as excited about this as I am? Let me know what your favorite feature in Angular 20 is.