A Joy-Filled Release for the Holiday Season—Angular 19

Angular 19 comes with stable Signal API, incremental hydration and a new style guide. Check out the big news from the v19 launch today (Nov. 19, 2024)!

Today, the Angular team released their 19th version of this beloved framework, with a cheery overcast to the whole event:

“We’re better when we work together. That is why we have been collaborating with Firebase, Netlify, IDX, Puppeteer, Playwright, Vite and many other ecosystem teams to bring you joy when building web apps.” — Minko Gechev

This does seem to be the vibe, as the team continues to roll out amazing new features for the framework at a consistent pace, making both end users and developers happy.

Minko also went over the most significant innovations as well as the challenges that the Angular team has addressed in the recent versions, in the State of Angular address at NG Belgrade. This included the rise of signals, making Zone.js optional for Angular developers and an overall community-driven approach to development.

In the stream event this morning, many Angular team members presented the latest features of v19 that build upon these most recent monuments.

There is so much to cover and so little time this holiday season, so let’s cover the top three best features in Angular v19 that you really don’t want to miss.

• Signal API Stabilization & Additions
• SSR Updates: Incremental Hydration
• RFC for NEW✨ Style Guide

Signal API Stabilization & Additions

Before Angular v19, Signal and Computed Signals were stable. However, there was a long list of signals (see image below of Jeremy walking through them) that are all now stable too!

Now that those are stable, there are two more feature to the Signals API that are in developer preview for Version 19: linked signals and resource.

Linked Signals Are …

Linked Signals are writable (you can’t write on an input signal, but you can on a linked signal). They have state that depends on another reactive state. A good use case for these would be a writable local state that depends on other signals. So think, “writable input signal.”

→ When expression changes the value of the linked signal changes back to whatever was calculated.
→ “The linkedSignal function lets you create a signal to hold some state that is intrinsically linked to some other state.” — Angular Docs
→ Just like a signal but instead of default value, accepts computation fn.

Resource Is …

Resource is how a signal can asynchronously load data in response to dependencies changing. Resource will expose loaded data as a signal and its loading and error states are signals too. 🤯

→ Request is essentially a computed signal of everything you need to make a request.
→ Loader is needed to expose linked data.
→ Resource is somewhat writable as you can change the data coming from the server.
→ RFC coming for resource: names, syntax and features are all going to be discussed and integrated on as the community speaks into this new addition to the framework.

There is a rxResource version too, and Deborah Kurata made a killer video on rxResource() vs. Resource() that is worth checking out. I’ve invited her to come on Angular Air and talk about these further with us on December 5th. So come join the stream and ask all your burning signal questions!!

SSR Updates: Incremental Hydration

In v16 Angular offered full application hydration support, in v17 deferrable views, in v18 eventReplay. All three of these have led us to now, the ability to offer incremental hydration. However, in order to fully understand how amazing this feature is, perhaps some SSR back story is needed.

Full application hydration in v16 came with a flicker/layout shift cost. Deferrable views reduced the JS that needed to be initially loaded and fixed potential layout shifts with placeholders, giving us a better form of hydration in our Angular apps. However, placeholders came with a cost, the placeholder content need to be replaced and, before it was, it had no interactivity.

Incremental hydration is rendering the main template on the server side, so that it should look like it will after the defer block is triggered and then, on the client side, leaves that content dehydrated. So the content is the real deal, no placeholder needed. But, being in a defer block, as one would expect, we are skipping the JS download.

Here is a look at how to implement incremental hydration; it is an additional option now for defer blocks:

So now, the obvious next question: What happens if someone tries to interact with this content that hasn’t been hydrated yet?

Uncanny Valley

There is an SSR term called the “uncanny valley” that describes the state of your server-side rendered application when JS/Angular hasn’t loaded yet. If a user tries to click on something, nothing happens, because the application isn’t fully hydrated yet.

The Angular team’s answer to the un-hydrated not-interactive content bits (or uncanny valley), is the previously released feature, EventReplay! Event replay allows developers to capture events triggered during the uncanny valley. Then, start hydrating the content and replay the event when the JS is loaded and ready.

Incremental hydration is so powerful, especially combined with EventReplay. But the features don’t stop there! It also comes with a new trigger (never) that can be used to tell things like static blog content to never hydrate, which is a great way to reduce the overhead of your apps!!

To start using incremental hydration, add provideClientHydration(withIncrementalHydration) to your application’s providers, and then you can start using the hydration triggers in your defer blocks!

RFC for NEW✨ Style Guide

This one is not strictly an Angular feature that was released this version. However, it does highlight the heart of the Angular movement right now—community-driven development to bring developers joy. I am so excited about an updated style guide and the request for comments is currently still open. The Angular team wants to hear from you as they shape the future of our most wonderful framework. So check it out and give your thoughts!!

That’s a Wrap 🎁

There were many other highlights, like for instance, standalone is now the default. No more saying standalone: true when you’d like to reach for the latest. The CLI with ng update command is going to be clutch for this, so that you don’t have to flip your standalone flags manually. There are also three new refactoring tools in v19 as well as ASL refactoring directly in your IDE that are SUPER helpful with all of these new features rolling out quicker than light.

Be sure to check out the docs or the v19 stream event to catch all the other amazing features. The team worked really hard on this one—I’m in awe of all they fit into it.

And for using new features (like standalone) along with Kendo UI for Angular, make sure you check out our docs for the latest ways to integrate our components. As always, we have Day-Zero support for v19 of Angular. We are so excited for the direction and vibe the Angular team is putting out, and we hope to match it in the coming year.

Till the next one, happy holidays and happy Angular v19!!