DEV Community

Cover image for Episode 23/42: Template Control Flow & @defer, Forms & Signals
ng-news for This is Angular

Posted on

11

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

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.

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.

RxAngular | RxAngular

Performance & DX

favicon rx-angular.io

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (1)

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Great stuff. I'm running V17 RC1 and the new template syntax is just pure gold. Next level amazing stuff with @defer as the center piece

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay