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.
Other than the shown new @for syntax, Angular version 17 also brought us new @if , @elseIf, and @switch:
This significantly cuts down on code and makes it easier and simpler to read. This:
is refactored into this:
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:
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:
| Trigger | Action |
| idle | Load as soon as your browser reports it is in an idle state |
| interaction | Load as soon as the user interacts with the page.Element is being clicked focused or some similar behavior |
| viewport | Load as soon as the content enters the client’s viewport window |
| hover | Load as soon as the user hovers over the area |
| timer | Load after a specific timeout |
| immediate | Load immediately |
| Custom Trigger | Let loose your developer creativity and create your own action |
And here are a number of examples of how you can use that:
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:
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:
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:
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!
