Episode 23/42: Template Control Flow & @defer, Forms & Signals

#angular #webdev #javascript #programming

Angular 17 comes closer. Last week, we received the first beta release.

Angular 17: Release Candidate

Mark Thompson & Alex Rickabaugh on new Template Syntax and `@defer`

Mark Thompson and Alex Rickabaugh, both members of the Angular team, discussed the upcoming additions for the template at Angular Nation.

According to Mark, the new template syntax is backwards-compatible. An automatic migration might be available in version 17 but we can still use the old version with structural directives.

Direct Link

In addition, Mark suggested that Angular leads the way againt, and that other frameworks will soon to come up with similar features.

Direct Link

Whether the new template syntax will be in developer preview or stable is still being determined. A possible reason for developer preview might be that parts of the underlying algorithm for lists are different.

Alex underlined that this shouldn't be a reason to stick to the old structural directives.

Direct Link

A benchmark from the alpha version confirms the performance improvement when list rows change their order. This is precisely the part that Alex mentioned.

Template-Driven Forms and Signals

Combining Signals with Template-Driven Forms is quite lengthy. We cannot use two-way binding but have to fall back to an explicit, even listener.

Brecht Billiet of SimplifiedCourses published a video where he uses a two-liner directive which seamlessly updates Signals via on valueChanges and thus reduces quite a lot of boilerplate code.

State Adapt 2

NgRx is the number one in Angular regarding state management, but alternatives exist. A young one is State Adapt, which was released in version 2.

It distinguishes itself by a declarative style. StateAdapt can run on top of NgRx but also natively. Support for the Redux DevTools is available. The author of StateAdapt is @mfp22. He frequently publishes articles on dev.to around state management and other topics around Angular.

youtube.com

RxAngular

RxAngular, another library for state management, had a minor version upgrade to 16.1.

RxAngular is actually a suite where parts of it are for state management. The other part is about directives you can use for Angular applications with a high-performance demand.