Angular v16 Is Here! Know What’s New About It.

After a waiting period of more than half a year, since the launch of Angular 15, the company finally unveiled its much-awaited version on May 2023; Angular v16.0.0. The latest version of Angular is now available to be used by developers across the world. All this comes with amazing improvements across feature requests, with over 2,500 combined thumbs up on GitHub!

So what’s new with the Angular v16?

Signals – One of the most exciting features of Angular v16 is the signals, which is a new way of managing state changes in Angular applications. The best thing about this feature is that it returns the value with the help of the get() method. At the same time, the value can be also updated by calling them with a new value (set()). In simple language, the Signals function is an object that accepts a value. The feature can be used by consumers who consume the signals as this allows them to read the value as well as update the value if required.

Reactivity Model and Zone.js – Another great thing offered by Angular with the latest launch is the revisiting of the reactivity model and making Zone.js optional. The goal is to help improve the runtime performance of the applications. At the same time, Zone.js will also make Angular easy to use and write for developers as also add some overhead and complexity to the framework. But it’s going to be completely optional with the launch of Angular v16, which means developers can either choose to use or simply opt out of it or use other ways of managing reactivity. In this case, using RxJS or signals can be helpful. Some of the key benefits of these features are –

• Improved runtime performance of any Angular application due to the deduction of the change detection process.
• Enabled fine-grained reactivity to measure if the components are affected due to the new feature.
• Much better interoperability with RxJS

Required Component Inputs – one of the major changes one can experience with the launch of Angular v16 is the integration of Required Component Inputs. The sole purpose of this feature is to help improve the code quality as well as the developer's experience when working on the angular application. It allows developers to mark some input properties as mandatory when it is required to define any component. So, with Angular v16, when anyone is going to use this feature within the application, it will be mandatory to provide the values of that input. Without providing the values of that input, there will be an error message related to this. The goal is to ensure that the defined component always receives the necessary value.

Ngcc or Angular Compatibility Compiler Remove – Back on 6 February 2020 when Angular 9 was launched, the team implemented a new feature called Ivy related to the compilation related to the next-generation rendering pipeline. NGCC was also introduced at the same time and the goal was to support the libraries based on the old view engine. With the launch of Angular v19, the Angular team has removed NGCC and all related code blocks related to the old view engine. This will help reduce the unwanted bundle size of the applications. With this update, we can say that the Angular framework has completely transferred to Ivy. 

Server Side Rendering and Hydration – For single-page applications, the key factor has always been improved runtime performance. But it has been noted that the initial load takes a few seconds extra if compared with classic web-based applications. The reason has been that initial load also involves the loading of a large volume of JavaScript Code along with HTML and CSS. That’s not going to be a problem anymore with the launch of Angular v19, the team seems to have addressed this problem by reusing the already server-side rendered markup when loading JavaScript bundles into the browser. This can be also called a major reform in Angular as the team has worked with the Chrome Aurora Team related to improving performance for hydration and server-side rendering.

ES Build Dev Server Support – You must be wondering what’s new in this as ESBuild support was already available with the previous version of Angular. There’s a change. In the previous version, the support was available only during the use ng build command for build purposes, but with this launch, it is also provided for the NG serve command as well. If compared to the previous version, this bundler provides a faster and smaller bundle time, which is nearly 40% compared to earlier. Again, there’s a hack as this new feature can be only used during the build of the application. A developer cannot use it during the development time.

Other Features Of Angular v16.0.0

• Improved dependency injection along with Debugging APIs.
• Improved documentation and schematics details.
• Extended support for CSS isolation.
• Better security in case of Cross-Site Scripting attacks.
• The date Range picker component is introduced.
• Angular components support self-closing tags.
• CTX feature offers access the destroy context of a component.
• Design tokens in Angular Material Library

Final Words

No doubt that with the introduction of Angular v16, developers get a whole new world of amazing features, each of them aimed to increase application performance as well as the safety of data and applications. An important to be noted here is that not all features launched with this version are dependable as some of them are still in the initial or developer preview mode. No matter what, this launch will change the code and application structure using Angular Framework. It’s going to be useful for both the developers as well as business owners.

Overall, I’m quite excited about the launch of Angular v16. It looks like some great additions, aimed for the future and some are added for trial purposes and possibly will be in their full-form with the next launch of a higher version. Stay tuned for more updates, and happy coding!

Please share your valuable thoughts - Like - Share - Comment