Angular 18.0: New features coming

ℹ️ Draft: The development of Angular 18.0 is just started, this is a work in progress collection of notes.

• What's coming?
• Forms: Events on value and state changes! Great improvement!
• Experimental (use at your own risk): Change detection without Zone.js !!!
• Breaking changes
• ToDo
• Video tutorial: how to update to a @next (beta) version
• What's new in version 17.x

Release date: This release is planned in May 2024. We will follow the weekly changes.
Stay tuned for some examples coming, follow the RSS or subscribe to the newsletter.

Here a list of what can be useful in the daily activity of a developer.
Compiler improvement and bugfixes are not included.

If you want to test the new features you need the next version of Angular. For an existing project you can upgrade using

ng update @angular/cli @angular/core --next 

If you want to update the Angular on your version you can follow this guide: How to update Angular

What's coming?

Latest version: 18.0.0-next.5 (2024-04-17)

Node version: no change (yet), ^18.13.0 || ^20.9.0

Typescript version: >=5.4, TS must have version 5.4 or more recent. 5.4 was already compatible with 17.3. You can find the information about TS 5.4 here.

Yarn version: no change (yet), >=1.22.4 <2

Minor Changes:

• Allow Route.redirectTo to be a function which returns a string or UrlTree (#52606)
• Guards can now return RedirectCommand for redirects in addition to UrlTree. From feat(router): Add ability to return UrlTree with NavigationBehaviorOptions from guards #45023

Forms: Events on value and state changes! Great improvement!

The 'official name' is: Unified Control State Change Events https://github.com/angular/angular/pull/54579

This seems a cool change, I'll create a dedicated post. The original request is from 2016(!) and received more than 400 likes in github.

The goal is to be able to track more events in AbstractControl (Forms).

When the State of an AbstractControl (and Form) changes, an observable is emitted.

The official documentation has not been updated yet, from the source code we can see that some new classes have been addded:

• ControlEvent: it's an Abstract class used as base class for every event, it contains the reference to the Control produced the event
• PristineChangeEvent: it fires when a Control pristine status changes (pristine / dirty)
• StatusChangeEvent: communicates the Control reference and the FormControlStatus when this last one changes
• TouchedChangeEvent: it fires when the Touched status changes (touched / untouched)
• ValueChangeEvent: it fires when the value of a Control changed, it contains the new value

We have a new Subject exposed as Observable that emits after every change in value or status:

private readonly _events = new Subject<ControlEvent<TValue>>(); 
public readonly events = this._events.asObservable(); 

The value change is emitted just after the control is updated (the parent is updated later). Other events are emitted only after the update of the parent control.

I think this is a great new feature available and can give us more control of what's happening pages with forms.

Stay tuned for some examples coming, follow the RSS or subscribe to the newsletter.

Experimental (use at your own risk): Change detection without Zone.js !!!

The official feature is here: Add zoneless change detection provider
There were some discussions about Angular moving away from zone.js this is a first step. Now it's possible to configure the application to don't use zone.js and the browser for the change detection but use directly Angular APIs.

The API involved are (list from the documentation):

• ChangeDetectorRef.markForCheck
• ComponentRef.setInput
• updating a signal that is read in a template
• when bound host or template listeners are triggered
• attaching a view that was marked dirty by one of the above
• removing a view
• registering a render hook (templates are only refreshed if render hooks do one of the above)

This is only experimental and I guess, won't be useful (yet), for most of the applications.

If you want to experiment with it, you can disable zone.js using:

  bootstrapApplication(MyApp, {providers: [ 
   provideExperimentalZonelessChangeDetection() 
]}); 

At this point zone.js is not more used and the reference can be removed from angular.json.

Breaking changes

A lot here, I've to still look into, mainly are Change Detection changes:

• OnPush views at the root of the application need to be marked dirty for their host bindings to refresh.
• The exact timing of change detection execution when using event or run coalescing with NgZone is now the first of either setTimeout or requestAnimationFrame. Code which relies on this timing (usually by accident) will need to be adjusted.
• Newly created and views marked for check and reattached during change detection are now guaranteed to be refreshed in that same change detection cycle. Previously, if they were attached at a location in the view tree that was already checked, they would either throw ExpressionChangedAfterItHasBeenCheckedError or not be refreshed until some future round of change detection
• Guards can now return RedirectCommand for redirects in addition to UrlTree. Code which expects only boolean or UrlTree values in Route types will need to be adjusted.
• Router: Providers available to the routed components always come from the injector hierarchy of the routes and never inherit from the RouterOutlet. This means that providers available only to the component that defines the RouterOutlet will no longer be available to route components in any circumstances.

ToDo

There is still a lot that has been added, I'll try to catch up. The Angular team is moving a lot of pieces :)

Video tutorial: how to update to a @next (beta) version

In this post we are using the beta release of Angular, in the following video there is a step-by-step guide on how to install the @next release on your dev machine.

What's new in version 17.x

From the Official Angular Blog: how to use output()

Angular 17.3 is the last official version, released on March 13th, 2024. The list of changes are here: https://marco.dev/angular-17-3-features.

Angular 17.2 has been released on February 14th, 2024. Post about Angular 17.2: https://marco.dev/angular-17-2-features

Angular 17.1 has been released on January 17th, 2024.

You can find a list of changes (more than 10) relevant for developers here: https://marco.dev/angular-17-1-features