In previous posts, we covered the major changes in Angular version 16, which introduced a new approach to reactivity with Signals . Since then, there have been two updates to the framework, with versions 17 and 18.
Changes in version 17
Angular version 17 focuses primarily on the introduction of new control structures and deferrable views.
Control structures
New control instructions have been implemented in HTML templates, which are more in line with those used in other programming languages. These new instructions are more intuitive for developers and are also much more efficient, as the Angular compiler optimizes them during project construction.
If
To implement an if condition, the *ngIf property was used. Additionally, if you wanted to implement an else condition, you had to set up an ng-template element with the else content and specify it next to the condition. If-else structures weren't allowed.
Using the clauses introduced in Angular 17, you can define @if and @else blocks, also allowing you to create else-if structures.
For
For for structures, the *ngFor property was previously used, which replicated the element as many times as necessary.
The new version includes the @for statement. This statement always requires a track, a selector that identifies each record. Angular uses this to determine which elements should be re-rendered when a change occurs in a single element.
Switch
Previously, the *ngSwitch property was used. This new version introduces the @switch instruction.
Example of a previous if-else clause
Example of a new if-else statement
*ngFor example
Example of a new for statement
ngSwitch example
Example of a new switch statement
Performance improvements
These new instructions are processed by the Angular compiler, allowing for optimization. According to the documentation, it can improve the performance of for loops by up to 90%.
Automatic migration of control structures
In addition, in order to facilitate the migration of projects that use the previous control structures, a command has been introduced that automatically migrates the code to the new structures, although the result must be reviewed.
Running the following command updates the application code:
Command executed to migrate to the new control structures
When you run the following command, the following changes occur:
Pre-migration code
Code after automatic migration
Deferrable views
Angular 17 introduces deferrable views, allowing you to exclude large components from the main bundle and load them asynchronously. This can improve certain metrics, such as initial load time, which could improve user experience and page rankings in search engines.
To mark an element as deferred, it is wrapped in the defer statement.
In the following example, the defer statement is used to defer loading of the ExpensiveRolesDashboard element, while the UsersDashboard element is not deferred.
Example of deferred view
As a result, when the project is compiled, a main bundle will be created, containing the JavaScript and HTML code for all non-deferred elements, and a separate bundle will be created for each deferred element. When the page loads, the contents of the main bundle will be downloaded and rendered in the browser, and subsequently, the contents of the bundles marked as deferred will be downloaded and displayed.
Stable changes
With Angular version 17, the following features have moved from preview to stable.
Server side rendering
Hydration has been marked as stable. This method, in server-rendered applications, serves an initial, pre-rendered version of the content to the client. The content is then loaded into the browser, with only the necessary fields modified.
Vite and esbuild
Vite and esbuild have been established as the default build tools for new projects. Using these tools allows for significantly faster build times. They also improve rendering times for server-rendered projects.
Changes in version 18
Angular version 18 primarily introduces improvements to zoneless change detection.
Vite and esbuild
Angular originally used Zone.js to detect changes in the application state. This library causes some issues with the development experience and performance because it performs a series of state checks every time a change might have occurred. For these reasons, the Angular team has been working on an alternative to Zone.js for some time.
Angular version 18 adds the option to use zoneless, a change detection implementation that doesn't rely on Zone.js and offers the following improvements:
- Improvements in microfrontend composition and integration with other frameworks.
- Improvements in performance, rendering and execution times.
- Smaller bundles.
- Simplified debugging and more traces.
These advantages are achieved because with the use of zoneless, events that produce changes, especially those produced with Signals , notify the framework directly of what changes have occurred, avoiding costly checks on the state of the application to detect whether a change could have occurred.
Stable changes
The following features have been marked as stable:
- New control structures.
- Material 3.
- Deferrable views.
- Improvements to server side rendering.
Conclusions
These two updates continue the path established in previous versions to improve performance and the development experience.
The introduced control structures allow for more readable code, similar to those used in other programming languages, and also improve performance. Meanwhile, the introduction of deferrable views, improvements in server-side rendering, and change detection introduce tools to improve the framework's performance, enabling a better experience for end users.
Want to know more about Hunters?
Being a Hunter means accepting the challenge of testing new solutions that deliver differentiated results. Join the Hunters program and become part of a cross-functional group capable of generating and transferring knowledge.
Get ahead of the digital solutions that will drive our growth. Find more information about Hunters on the website.
Joan Galiana
Software Engineer
Altia
