Embracing Angular 16: New Features and Updates   

In the ever-evolving landscape of web development, staying ahead of the curve is crucial for crafting modern and efficient applications. Angular, one of the most popular JavaScript frameworks, continues to lead the way with its consistent evolution and regular feature updates. With the release of Angular 16, developers are looking at a variety of new ways to improve their coding and enhance application performance. 

The release brought a host of Angular 16 features and enhancements that promise to improve the Angular development flow and some of the challenges we face each day. In this article, we’ll take a closer look at some of them, and assess how they can improve our coding practices, repository organization, and overall application architecture.

Angular Signals

One of the main reasons why Angular Signals are going to improve your life as an Angular developer is because they allow you to express Reactive values and how they are intertwined with each other in a synchronized way. Below is an example of how it can be used with Angular.

The snippet creates a computed value fullName , which depends on the signals puppyName and puppyFood. The declared effect on line 14 and its callback will execute every time we change the value of any of the signals it reads. This is adding dependency between puppyName, puppyFood  and the printFn so that when we click the button, we can see a log in the console saying:  

“Jack eats: Chicken”.

You can find out more about Signals in the following RFC.

How all this works with RxJs

You can convert Angular Signal to Observable and vise versa using the functions provided in @angular/core/rxjs-interop ( Note: this is still in developer preview which means it is subject to change. But any feedback is welcomed by the Angular team; feel free to test it out and give constructive feedback).

Following is an example of how you can convert Signal into an Observable

Following is an example of how you can convert Observable into Signal

Tooling for Standalone components/directives and pipes

The tooling has been significantly improved regarding the standalone components; now, if you want to migrate, you can simply do

ng generate @angular/core:standalone

And this will ask you to follow three ( 3 ) steps in order to automatically migrate your project to use standalone components. This will clear and remove any unnecessary NgModules classes and will change the bootstrap project to use standalone APIs.

For example, this is what my bootstrap looks like:

If you want to create a new project, you can directly tell the CLI to use standalone API using the following CLI command

ng new –standalone

If you take not from the snippet above I am also using
  provideZoneChangeDetection({ eventCoalescing: true })

Which is also added and new in this version of Angular and enables us to configure Zone.js 

Required Inputs

The feature I love the most is that now we can define @Input values as required.

You can do that by using the the @Input decorator or the @Component decorator Inputs array to define it:

Better Unit testing

Added experimental jest out of the box with a small configuration in the angular.json file. This reduces the complexity of testing.

In order to opt in to using jest you would need to

npm install jest –save-dev

And manually update your angular.json file with the following:

If you are interested in learning more about unit testing the following article has more information

Server Side Rendering and Hydration

The Angular team has been lagging behind React for some time now when it comes down to SSR and Hydration. Since Angular 16 they introduced non-destructive hydration and with this Angular no longer re-renders the application from scratch but instead it looks up Existing DOM nodes , it builds internal data structures and it adds/attaches event listeners to those nodes.
With this there is no more flickering on the page , it significantly improves the Web Core Vitals.
You can opt in you need to add the provideClientHydration()function inside of the main.ts file.

There are a lot of plans and improvements down the road for SSR and Hydration that the Angular team has in mind and some would be coming as early as end of year (2023). One of which is resumability that was introduced in the open source Qwik framework.

Honorable Mentions

The team also released a developer preview of the ESBuild-based build system. You can opt into using this with minor tweaks to your angular.json file, as explained in the below screenshot:

Which is actually using Vite + ESBuild to do this.

• Autocomplete Imports in templates
• Typescript 5.0 support with support for ECMAScript decorators
• Support for Service workers and app-shell in standalone applications.
• Passing router data as component inputs
• Self Closing tags
• CSP support for inline styles
• Instead of  takeUntil operator we can now use takeUntilDestroyed

Summary

The Angular team is devoted and working hard on improving the framework and everyday life of developers using it. Version 16 was a key part of this, and its feature releases would serve as a stepping stone for much better times that are coming and in my opinion that are going to push the framework to new heights. Looking forward to the architectural changes that the new features may bring and how that will change our development flow.

You can find out more about Angular 16 from here , or you can watch a short summary video on youtube Angular Channel.

Do you want more great blogs like this?

Subscribe for Dreamix Blog now!