Angular 17 New Features and Updates

Introduction

The core Angular development team, the 13th anniversary of Angular’s red shield, has set the latest version of Angular 17 release date on 8 November, 2023. Following its traditional way of a major release every six months and 1-3 minor releases for each major release, Angular is the time idol for the community worldwide. To date, it is not just Angular 17 but v17.1 and v17.2, which have also been released for the developers to look at and get even more excited with the latest features and changes. However, these new updates will surely take the community by storm as, this time, the Google Team has outdone themselves with the latest Angular release.

What’s New in Angular 17 Features and Updates

?? New Angular Logo

?? New Angular Documentation Site

?? Signals. No mutate() method, effect() runs after ngOnInit()

?? Local Change Detection. Try signal with onPush

?? Deferred Loading

?? New Control Flow syntax

?? Transformational @Input()

?? Styles without an array

?? Server-Side Rendering improvements

?? SSR new application builder - ng new app --ssr

?? Better build performance with ESbuild

?? Using toSignal() as an async pipe with rejectErrors options to mimic async pipe error behavior.

?? View Transition API support for router to use CSS for animation.

?? Lazy-loaded Animation Module

Here, I am mainly explaining two new features in Angular 17.

1.??? New In-Built Control Flow

2.??? Deferrable Views

1.??? New built-in control flow

?Angular 17 Features include the introduction of a new declarative control mechanism, driving a sea change in how we manage templates.

Although @nglf has been the customary approach for rendering, the Angular Version 17 brings forth a syntax similar to what applied in JavaScript and Python. @for, @if and @switch have upended the traditional @nglf construct among more-a move seen as fulfilling a crucial need of the contemporary software development ecosystem. Not only do these modifications help build an easy-to-read code, but also significantly enhance its performance.

Let’s understand the new constructs with some examples:

?? The @if conditions

Look at the example below to understand how the @nglf construct makes the code structure simpler, clearer, and more expressive-while eliminating the need of using extra tags or the ng-template tag.

?? The @for loops

Loops play a crucial role in virtually every application because they serve as fundamental building blocks for working with lists and data. Today Angular provides us the ngFor directive.

Let’s take a look at how we write such a loop inside an Angular template using the new control flow syntax.

We can see some differences here. Firstly, we’re missing the let keyword in front of the variable definition, and secondly, we’re introducing the track function.

New better "track"

In Angular, the trackBy function is used with the ngFor directive to optimize rendering of lists. It assigns a unique identifier to each item in the list, allowing Angular to efficiently update and modify individual items without re-rendering the entire list. This improves performance, especially with large lists.

In a performance research, the Angular team found out that NgFor loops over immutable data without trackBy is one of the most common causes of performance issues across Angular applications.

Due to the risk of performance issues, the track function is now required for for loops.

The nice thing about track is that we can now write our whole expression inline and there's no need for a dedicated function in our template.

It’s still possible to invoke trackBy function via track. This will mainly be used for migration purposes.

Implicit variables

In the new control flow syntax the following variables will be available within a for row view.

To access those variables we have to use the let keyword to assign them to a variable of our choice.

Empty block

The use of an @empty block provides us with the ability to render an element even when the list is empty.

Let’s say we have a list where we display all the streaming services a user is currently subscribed to. If the user doesn’t have any streaming service subscriptions we display a div with a message. This is a perfect use case for the @empty block.

Automatic migration

Angular provides an epic migration command that will migrate our application to the new control flow syntax.

?? The @switch case

The Switch-Case statement allows you to evaluate an expression and execute different blocks of code based on the matched case, making it a useful tool for handling multiple branching conditions.

In the current Angular version, we were able to write a switch-case statement by adding the following directives to our components or modules imports array: NgSwitch, NgSwitchCase and NgSwitchDefault. The HTML code then looks like this:

Let’s rewrite this to the new control flow syntax.

2.??? Deferrable Views

In the fast-paced world of web development, delivering seamless user experiences and lightning-fast performance is paramount. Enter @defer, a hidden gem in Angular’s arsenal that empowers you to achieve both with its on-demand loading magic.

Imagine a feature-rich application brimming with functionality. Each component adds value, but some might not be relevant to every user interaction. Loading everything simultaneously bogs down the initial experience, especially on slower connections. This is where @defer steps in, acting as a strategic delayer.

@defer doesn’t load heavyweight content until the user explicitly demands it, be it through a click, scroll, or any other custom trigger you define. This translates to:

• ? Blazing-fast initial load times: Users, even with complex apps, encounter a lean and speedy first impression.
• ? Enhanced user experience: No more waiting for components they might never use. @defer delivers content exactly when and where it’s needed.
• ? Improved maintainability: Break down your code into modular, deferrable blocks for better organization and easier management.

Blocks:

@defer blocks have several sub blocks to allow you to gracefully handle different stages in the deferred loading process.

Now Comes the Question of How to use @defer

@defer

Imagine a chart component with multiple features, With @defer, you can load that component lazily without any boilerplate code.

The only thing you need to take care of is that the component should be a Standalone component.

@loading

Now, imagine that the component is a heavy one and might take some time to load. So we can introduce a Loading component that can manage the Loading state gracefully:

See example below:

@placeholder

Consider another scenario where we might have to show a placeholder to give a better user experience to users, so here comes @placeholder.

@placeholder is an optional block that declares content to show before the defer block is triggered

@error

There might be some Scenarios where the Loading of the defer block may fail. The reason may be due to network connectivity issues or the internet going off; Then we can use @error block to handle such scenarios.

Understanding triggers in @defer:

Deferrable views in Angular 17 empower you to optimize initial load times by only fetching content when truly needed. But how do you decide when to load this content? Here come defer view triggers.

So, there are multiple types of Triggers we will go through One by One :

On Idle: This is the default behavior with a defer block. Will trigger the deferred loading once the browser has reached an idle state

On Viewport: Loads content when the specified element enters the viewport.

By default, the placeholder will act as the element watched for entering viewport as long as it is a single root element node.

Alternatively, you can define a template reference variable within the same template as the @defer block. This variable refers to the element observed for entry into the viewport and is then passed as a parameter to the viewport trigger.

On interaction

The deferred block will be triggered upon user interaction with the specified element, either through click or keydown events.

By default, the placeholder will act as the interaction element as long as it is a single root element node.

On hover:

hover triggers deferred loading when the mouse has hovered over the trigger area. Events used for this are mouseenter and focusin.

By default, the placeholder will act as the hover element as long as it is a single root element node.

Alternatively, you can specify a template reference variable as the hover element. This variable is passed in as a parameter on the hover trigger.

On Immediate:

Immediate triggering initiates the deferred load without delay. The defer chunk begins fetching immediately when the client finishes rendering.

On Timer:

The timer(x) will activate after a specified duration, where ‘x’ represents the time interval. This duration is required and can be specified in milliseconds (ms) or seconds (s)

Prefetch:

There may be situations where we want to separate the process of fetching content from rendering it on the page. In such a case, the prefetch condition comes to the rescue. It allows us to specify the moment (using the previously mentioned triggers) when the necessary dependencies will be downloaded. As a result, interaction with this content becomes much faster, resulting in a better UX.

On Custom Condition:

Imagine a scenario where you wish to defer the loading of a component only under certain conditions. For example, in a chat application, you might want to load a chat history component exclusively when the user is authenticated

Conclusion

Switching to Angular 17 is a smart move for anyone looking to make web apps that are quick and powerful. This new version of Angular makes everything run smoother and faster, setting a new bar for how efficient a framework can be.

Here are the main reasons to upgrade:

• Quicker app starts and builds: Angular 17 makes apps start over 50% faster and builds 65% quicker. This means you can make and test your apps faster.
• Uses less memory: The way Angular 17 handles showing stuff on the screen and checking for changes means it uses up to 30% less memory. So, your apps can deal with more users at the same time without getting slow.
• Better at loading only what's needed: New ways of loading only the necessary parts of your app make pages load up to 40% faster.
• Easier code writing: New shortcuts like @if and @for make writing code simpler. Also, working with TypeScript 5.2 makes your code safer from errors.
• Focus on including everyone: Angular 17 includes better support for making apps that everyone can use, focusing on things like clear text and easy navigation.

Upgrading is usually straightforward with a simple ng update and a few small changes to your code. Angular 17's emphasis on being quick, efficient, and user-friendly is a big plus for anyone making web apps. For teams aiming to create the most up-to-date web experiences, Angular 17 is a great choice.