The Angular (r)evolution

by Daniel Moreira, Software Engineer

 

For a while Angular fell out of favor with a lot of developers, it was often seen as heavy, complex and hard to get started with and let’s be honest… it was true. However, Angular is going through a (r)evolution: the docs are better, the tools are faster and the developer experience is at the center of every new feature. As some have pointed out “this isn’t just a refresh – it’s a shift in mindset”.

Let’s dive into what’s new, what’s exciting, and why now might be the perfect time for you to rediscover Angular.

 

Standalone API

The standalone API is one of the most impactful milestones in Angular’s (r)evolution since it simplifies application design and promotes true modularity. Say goodbye to boilerplate NgModule files filled with declarations. We can now import components, pipes, and directives directly where they’re needed – no intermediate module required.

This change not only streamlines development but also improves tree-shaking (leading to smaller bundlers) and unlocks powerful new features like @defer (more on that later).

 

New control flow

Have you ever wondered why a simple if…else looked so odd in an Angular template? Well, no more! The new built-in syntax @if, @for, and @switch makes templates cleaner, more intuitive, and more Javascript-like. A small change with a big impact on daily development.

 

Deferrable views

We’ve all used lazy-loading to load routes on demand – a great way to reduce initial bundle size and improve load times. But what if we could lazy-load specific parts of a template? Thanks to the Standalone API, now we can!

With @defer we get fine-grained control over when a block is fetched and displayed. Angular provides built-in triggers like on idle, on viewport, or on interaction, and we can even use custom conditions. And it gets better – with complementary blocks like @placeholder, @loading, and @error we can build more responsive UIs with ease.

 

Zoneless

Zone…less? Yes, you read that right. Angular is saying “bye bye” to zone.js – the library responsible for automatically triggering change detection. The goals are to improve performance, reduce bundle sizes, and – with the help of Signals – reduce the need to “monkey-patch” every browser API.

This feature is now the default for new applications in v21. If you aren’t there yet, you can prepare your applications by using Signals and ChangeDetectionStrategy.OnPush to ensure a smooth migration path.

 

Signals

Saving the best for last… So, what’s all the buzz around Signals? Aren’t Signals just “a wrapper around a value that notifies consumers when that value changes”? Yes.. and that changes everything.

Introduced in v16, Signals bring reactivity and performance to a new level. They are the backbone of many new features and the Angular team continues to expand their capabilities in every release. There’s so much to explore here that they deserve their own deep dive – stay tuned for a dedicated article about Signals!

 

TL;DR

There’s so much going on: new features to explore, improvements to increase performance, and tweaks to make the development process more developer-friendly. I didn’t even mention other exciting updates like faster builds thanks to esbuild, SSR enhancements with incremental hydration, the migration from Karma to Vitest, and even a mascot… yes, the Angular team announced Angie (the little armor guy) as the official Angular mascot!

It is clear to me that Angular reinvented itself and working with it now feels like Palpatine’s “unlimited power!”

Have you explored some of these new features? What’s your favorite?