What’s new in Angular 17?

The Angular team is dedicated to releasing a new major version every six months. The latest version, 17, was released on November 8, 2023.

Version 17 includes several new features, which I will introduce in the article, including:

• New Control Flow,
• Deferred Loading,
• Support For View Transitions API,
• Support for TypeScript 5.2.

New Control Flow Syntax

The new control flow, in my opinion, is the most crucial change in this release. After a long debate and consultation with the Angular community, the team is introducing a completely new @ – syntax.

It provides the functionality of structural directives *ngIf, *ngFor, *ngSwitch with some extra features. Let’s dive into some examples.

Example #1 – NgIf with the else option and the new syntax

As we can see, the old way of displaying some info up to some predicate was to use a *ngIf structural directive. The else block has to be implemented using another ng-template, and reference to that was set after the else keyword.

The new syntax gives us a plain if-else control without adding extra templates.

Example #2 – Empty with @for loop

With the new syntax comes a new feature – handling empty lists! Previously, to handle an empty list with proper information for the user, we had to create a separate ngTemplate and extra ngContainer to bind the if statement with its else option.

With the new syntax, we can do the same more shortly by declaring @empty right after for block scope. It’s also worth mentioning that, in the past, when using the ngFor directive, we had the option to utilize a trackBy property and a recognition function to optimize rendering. The new syntax simplifies this process by requiring only the property name the track function will use for object recognition.

Example #3 – Switch with @switch

Switch syntax in a new version is very similar to the old implementation of NgSwitch.

Here are a couple of reasons why the new flow syntax has been introduced.

The previous implementation of the control flow was based on the zone-dependent application. Structural directives are strongly coupled with Change Detection mechanisms. Angular Team has decided to go in the direction of a zoneless application with a Signals implementation, and now it’s making another step towards it.

Therefore, the team has decided to create a new implementation of control flow, and the plan is to deprecate the current implementation of structural directives as ngIf and ngFor but not remove them “until the ecosystem (including community-authored content) has switched over to the new control flow.” The NG Team has prepared an auto-migration scheme to facilitate incorporating new syntax changes. The only command that needs to be run is:

ng g @angular/core:control-flow

Be aware that this schematic is still only a developer preview migration.

Deferred Loading

A defer block is The most exciting feature of a new control flow. The best way to show it’s magic is just by presenting an example.

Let’s assume we have a simple pipe that capitalizes the input.

By @defer block, the angular compiler knows it shouldn’t immediately import that pipe (if it’s not used elsewhere) while loading the component, but when the predicate is true.

The chunk of javascript, including upperCasePipe, is downloaded when we click the button.

We can see how our application is chunked after a successful build – Angular CLI will display how many chunks can be fetched.

What if the connection is slow or broken?

Angular handles that easily by providing possibilities to define the view during loading and in case of error.

For example, if we turn on an offline mode:

But @defer control flow is much more powerful than it looks at first sight. We can connect the visibility of the component with some triggers.

Also, if we want to pass the responsibility to the browser, we can let the application manage to import code when a browser has finished its processes and is in an idle state.

This is particularly useful when you have heavy loadings that burden your page loading and user experience by slowing down features.

Difference between on and when

when: Some condition that triggers the change when it becomes true. After the change, it won’t revert to the previous condition even if the variable becomes false again.

on: Needs a predefined trigger that includes actions like interaction or entering the viewport. We’re able to combine multiple triggers.

Possible triggers:

• idle – triggered when the browser reaches an idle state,
• hover – triggered when the mouse has hovered over a specified area,
• immediate – triggered without any waiting,
• timer(x) – triggered after a specified amount of time,
• viewport – triggered when a specified element comes into the viewport, in other words, when it’s visible to the user,
• interaction – triggered when the user interacts with a specified element.

Why is it a crucial change? Advantages and disadvantages

There are a couple of reasons why this change is a vast improvement for the Angular apps.

Chunk loading

We could dynamically import the module’s code on demand by lazy loading modules. Right now, the Angular team has taken another step.

By importing a chunk of code on demand / idle / interaction, we can enhance user experience by fastening the page and loading the component.

Ease way of placing placeholders, loading view, and error handlers

The new syntax facilitates handling transition or failure states. Handling placeholders no longer needs other templates, interceptors, etc. Some problems with network traffic can also be handled with ease.

Support for view transitions API

View Transitions API is a feature that enables the creation of animated transitions between different DOM states. Until now applications handled animations, transitions by writing specific css and js files.
View Transition API is a new way of handling animations.

Full description of View Transitions API.

All major browsers now support the feature. IIn November 2023, View Transitions API was available in:

• Chrome,
• Edge,
• Opera,
• Samsung Browser.

Configuration in Angular is straightforward. All we have to do is configure the router during the bootstrapping application:

By providing this configuration, the default transition animation is visible:

Without view Transition API:

With View Transition API:

We can customize the way the animation is going, e.g.:

Support for TypeScript 5.2

Angular 17 comes with support for TypeScript 5.2. What is included in that?

The new use of keywords as a remedy for resource management

Using keywords can measurably help to handle resources. In a nutshell, it is a new block of code that declares a disposable resource. When the variable to which the resource was assigned is not used anymore, the method [Symbol.dispose]() is invoked, releasing the help.

Let’s take a look. We have some MockResourceHandler:

The old way of handling this resource would be to open it to try and finally block scope and to take closing connection in the final scope.

The new way requires changing the implementation of MockResourceHandler; the disposable interface and the [Symbol have to be implemented.dispose]() method has to be implemented as well.

Then, releasing resources will happen automatically on the method end:

Decorator Metadata

When using decorator functions, they gain access to a fresh metadata attribute within the object. Once all decorators have been executed within or attached to a class, the object can be reached within the class through the Symbol.metadata.

More details in ECMAScript proposal you can find on GitHub.