What’s new in Angular 17: Paving the way for smoother web development

The new Angular version, Angular 17, has just been released. This was a major release – Angular is one of the most popular web application frameworks in the world right now.  Unsurprisingly, the latest version comes with a variety of features and improvements for us Angular developers to enjoy. As a seasoned Angular addict, I had […]

by Kiril Zafirov

November 11, 2023

5 min read

Angular 17 is here

The new Angular version, Angular 17, has just been released. This was a major release – Angular is one of the most popular web application frameworks in the world right now. 

Unsurprisingly, the latest version comes with a variety of features and improvements for us Angular developers to enjoy. As a seasoned Angular addict, I had a lot of fun with the latest features. In this article, I’ve picked a few for us to take a look at. 

New declarative control flow syntax

The Angular 17 release gave us a rock-solid new syntax for control flow. Even better, it’s now part of the framework itself without the need to import the structural directives of *ngIf or *ngFor like we used to. This new built-in control flow results in significant improvements in the performance of @for, especially when it comes to ngFor. @for now also supports tracking by default and looks something like the following screenshot.


NKF5 K7O1N7UaqC9E8UQ2uR T5jOAZrlHW4KdI8i0RcSljPPiihf6gBTdS4iGNAQ0VpyxCKYRCvtKBj9VlhhQzq - What's new in Angular 17: Paving the way for smoother web development

Other than the shown new @for syntax, Angular version 17 also brought us new @if , @elseIf, and @switch:

 NzOdENk5PHU qZSWFJAvuyuSz5KjlMESWDsNufktBuc5LdbVYI3Ow9lqv tJupCFckuGCuss38p8BzMedCmAiX0S8KGR6YfPcsMPCeRzMWC1e75aqYOqV2nuj0tywDDCYubXlXQZ9Yt7KRrMvpOqPw - What's new in Angular 17: Paving the way for smoother web development

RFwqg3LJ9OwNDL6jQHFYcyR38VkdlqvrzTPuI0RX qjZEd2he6vIMwBlnA G8ywsNZgd2gAiTWDOnT7kwwwQUyJSnWv77hxsyIpymrYWUzEi7BGSVy3BPoeZwIEhS - What's new in Angular 17: Paving the way for smoother web development

This significantly cuts down on code and makes it easier and simpler to read. This: 

N3uuvyTtvqN - What's new in Angular 17: Paving the way for smoother web development

is refactored into this:

gSXNFvFdh4dVcc8 rNu c5ZI7pebR2GJKOzvHPuvGHZhIZeM0 90Bzuob0awh4cXcviGVXTa4E4bM3jqCb5Gzr1TYe Bga8bznatCvqetqXITJN1 5r0QRQ8 8GhHKCI4OArGRA18cdpyc92zYOsaw - What's new in Angular 17: Paving the way for smoother web development

All of this comes with the possibility of full backwards compatibility. You don’t need to migrate to it, and you don’t need to refactor your old code bases. If you’re curious, you can opt in and start using new Angular 17 features in your code and see what works best for your organization.

Another key feature is the new @for statement.  It uses a new, much more optimal diffing algorithm and implementation. Compared to *ngFor, it results in an up to ~90% faster runtime.

Deferred loading of components

An amazing, out-of-the-box functionality version 17 gives you is the fine granular deferred loading of components and elements inside of the templates. It’s as simple as saying something like:


ecvvExsZr7GUtRPT3lgS7ZfmUrNKWpweoc2Tq9vgVwQZENGm1syDl3 PAIwrLfmjcBusMcx9vm9AGqAvPi9BoKpKhi00z68UwYDSM6lywd9 - What's new in Angular 17: Paving the way for smoother web development 

That’s going to defer the loading of the component until the element enters the viewport of the client window. Following this, there are a number of further customization options you can use. Before, you needed to write a significant amount of code. You needed a deep understanding of how the viewport intersection observer worked in order to create custom code that gives you this same functionality – and now, it’s built-in! You just need to choose what you want to use. Here’s a table of the available options that Angular provides for us to use:

TriggerAction
idleLoad as soon as your browser reports it is in an idle state
interactionLoad as soon as the user interacts with the page.Element is being clicked focused or some similar behavior
viewportLoad as soon as the content enters the client’s viewport window
hoverLoad as soon as the user hovers over the area
timerLoad after a specific timeout
immediateLoad immediately
Custom TriggerLet loose your developer creativity and create your own action

 And here are a number of examples of how you can use that:

Jt7m7NKrZAMSnq5XtAPi 2q8efnOgiWgHBe4pmfL7p0vk7SzRxK - What's new in Angular 17: Paving the way for smoother web development

d2OrFPD2z3jRET77gz3tbdlRIu01v0rySCUDwFj2S6n3TIElTlygwEyGfnTv1w9IyuyswPptVALdIQa9WwQFRwlvN3OF3yR0YRLngvbI4F44nBu3hHKylMav54aXvjoGqt0SpIUHj0KE0J8TyvWFkQ - What's new in Angular 17: Paving the way for smoother web development

Also worth mentioning is Angular’s new syntax for @placeholder , @loading and @error. It lets you control what is being displayed in the template without handling logic or writing custom components – again, all of this is out of the box. Angular continues to deliver, and has implemented a smart algorithm under the hood – it tracks all the dependencies and references for what and knows how to update the states of placeholder, loading and error.   

Standalone By Default and Component improvements

The latest Angular has the standalone components by default when using
ng new or ng g component .

There are also changes and improvements to the @Input({}) transform attribute which enables you to do the following:

  XqaUIH DeFYB9hH1zAeqXMjYfdeR4d3ZuB4ttd3SZJwxFztLEPjpclWmsZYE6xPWQV JXQwzmAms ABPGr2Gh1dehwGGuajSTUab5wiGjGy5ct59 W0vc3bfxAkCIT8it7E GnBgHoFmqnWl5fU3kA - What's new in Angular 17: Paving the way for smoother web development

Jaq7Z2UOi3R8LdknLAtjMZE9DJrVvAz2RHDw36qaR9ipX849lW8OGZgWL623qfeqh9EHZ0 - What's new in Angular 17: Paving the way for smoother web development

The above is a built-in boolean transform function booleanAttribute. There is also an option to use the new built-in number function and there also remains the possibility to create a custom transform function and the only limit is your imagination.

Stabilizing and improving the APIs for Angular Signals

Angular 17 brings many more changes and improvements. But for brevity’s sake, I’ll just mention the changes made to the styles array for each component. This has now been changed, and it no longer needs to be an array:

LGSqXNy4bg9t4Dto6 SUnV4oqzls0EFe5Wg GrUH 7ywwyuZiAIguDPcfpqTXypO28kmYBB2wT2mV 7uQbgsA itKpvJeIodurJo7cjBCmXNWRHM4gPKI3E9WY3vU9BETrbPUEU d77qffcuukHPw - What's new in Angular 17: Paving the way for smoother web development

Build Improvements

ESBuild and Vite are added as alternatives to Webpack, which has led to a 2.5x speed increase in real-world applications. You don’t need to do anything in order to use these new alternatives – they’re active by default and will work in your normal Angular application. However, if you have a custom Webpack application, this wouldn’t work.

Rebranding and new documentation

Last but not least, Angular 17 is going through a rebrand – it seems to be in prime Renaissance time. You can jump in and check out the new site https://angular.dev/.  It was built with all new Angular features and has all the documentation re-written using standalone components. There, you can also see the new Angular logo. And you can find all new tutorials online, without needing to start a local development environment, download code, or anything like that.

Also worth mentioning (and this is something I personally love) is the Lighthouse report that you get for the site. It looks like this: 

3uAOyL9Y0fc7aLJ5IeZsAnL1fN9G4Dga73PTQ v2JEMTKHvwESBSfSewVsp fH xJ4WS 7118daVgRmqTMyTGhJ6gv61AS3LRDq3Ss0R2uCgLhqRR95iKxE7MMBotcctZfe 9bO0ptrnxS0Vz QiAw - What's new in Angular 17: Paving the way for smoother web development

Honorary mentions

Improvements to SSR 

Hydration is production-ready

Summary

The release of Angular v17 brought on a number of new features (and a new logo)! It’s paving the way for smooth web development and a rich experience for any Angular team. Constantly working and improving the framework, listening to feedback from the community, and implementing those changes make for better and faster apps. 

The Angular framework is now at a state where it’s very easy for beginners to pick up and learn, and it scales amazingly. It doesn’t matter if you’re building an enterprise-grade web application or a small to-do app. I can see myself saying something like “Enter Angular, exit everything else” at some point. And I believe we’re in for an overall bright future with this Angular Renaissance, in 2023 and beyond. 

The only thing left is to NG UPDATE and rock your next web development project! 

References:

Categories