Angular 16: What’s New in the Latest Version of Angular 16?

Quick Summary: Advanced technologies such as Angular make a big difference in the business world. Due to its remarkable features and functionalities, Angular 16 has caught extreme attention and became a trusted tool for multiple clients. Technology never stays put, and Angular 16 is no exception. This blog will help you explore Angular 16 and its new features and learn how it can be a game changer for businesses.

Well, Angular 16 comes with many new updates and features with this version. And those updates are more than we have seen in any of its previous major releases – Angular 15 or Angular 14. Of course, we are not considering here Angular to Angular 2.

Angular is revolutionizing the web development industry with its features and Angular v16 is just the beginning. As a renowned Angular web development company, we are always ahead in the tech industry to know, understand, and implement what new changes Angular 16 may bring.

Let’s read all the latest features and updates of Angular 16.

Angular 16

The latest version of Angular – Angular v16 is the latest iteration of Google’s popular TypeScript-based web development framework. Angular 16 servers as a production release, previewing a new reactivity model that promises higher web performance and developer experience with significant improvements.

The Angular 16 version, the Google-developed, TypeScript-based web application framework, was released on 3rd May 2023, with the prior success of Angular 15.

You can find Angular 16 on GitHub, with several developer previews highlighted in multiple aspects of the framework.

According to a blog post by Minko Gechev of the Google Angular team, the new reactivity model offers amazing runtime performance by lowering the number of computations during change deflection and is backward-compatible and interoperable with the present approach.

The model provides a more straightforward mental model for responsiveness by outlining the dependencies between the view and the flow of data within the application. The ability to check changes only in affected components is provided by fine-grained reactivity.

Features of Angular 16

As an experienced AngularJS development company, we noted the many interesting Angular16 features, offering a better developer experience. Let’s explore them further.

Signals: A New Way of Managing State Changes

Inspired by Solid.js, signals are a new method of controlling state changes in Angular applications. Signals are functions that can be updated by calling them with a new value (set()), and they return a value (get()).

Signals may also be dependent on one another, resulting in a reactive value graph that updates itself automatically whenever a dependency changes. RxJS observables, which are still available in Angular v16, can be combined with signals to construct robust and expressive data flows.

Visually Explained by Sarah Drasner

Signals StackBlitz playground by Enea Jahollari

Signals and fine-grained reactivity in Angular by Michael Hladky — conference talk from NG-BE 2023

Enhanced Server-side Rendering and Hydration

The Angular team has figured out that server-side rendering is the number one opportunity for improvement for Angular.

The application is no longer completely re-rendered by Angular when using the new whole app non-destructive hydration. Instead, when it creates internal data structures, the framework seeks up existing DOM nodes and attaches event listeners to those nodes.

Angular developers can leverage multiple benefits, like:

• Users won't experience content flickering on a page
• Better Web Core Vitals
• Future-proof architecture that uses primitives to enable fine-grained code loading. Currently this surfaces in progressive lazy route hydration
• Just a few lines of code are needed for simple integration with already-existing apps
• Using the ngSkipHydration property in templates to gradually adopt hydration for components that do manual DOM manipulation

The Angular observed upto 45% improvement of LCP with full app hydration.

Some applications already enabled hydration in production and reported CWV improvements:

You need to add a few lines to your main.ts to get started:

import {

bootstrapApplication,

provideClientHydration,

} from '@angular/platform-browser';

...

bootstrapApplication(RootCmp, {

providers: [provideClientHydration()]

});

You can find more details on its official document.

Get Your Web Project Started within 24 hours

Connect with Experts

Faster and Better Server-Side Rendering

Support for non-destructive hydration, which makes server-side rendering (SSR) quicker and more fluid, is another significant improvement in Angular 16.

With SSR, your application is rendered on the server and the HTML content is sent to the browser, where it is transformed into a fully interactive and useful web page by attaching JavaScript behavior and event listeners.

SSR helps your application with better SEO and accessibility while cutting down on time-to-interactive (TTI). SSR has long been a feature of frameworks like React or Next.js but implementing it in Angular was challenging.

Angular 16’s out-of-the-box feature is Server Side Rendering (SSR), which will speed up and improve SSR applications.

When hydrating the application, the browser uses a non-destructive hydration technique, which means that no existing HTML content or attributes are overwritten or deleted. Any server-side adjustments or optimizations you may have made to your HTML content are preserved in this way. Additionally, non-destructive hydration prevents potential conflicts or errors that might result from incorrect HTML content on the client and server sides.

Reactivity Model and Zone.js (Zoneless)

The reconsideration of the reactivity model and the making of Zone.js optional in Angular v16 are two of the most interesting features.

A package called Zone.js uses browser API monkey-patches to detect changes and start change detection in Angular applications. While this makes Angular easy to use and write, it also increases the framework's overhead and complexity. Zone.js will be optional in Angular v16, allowing developers to choose to manage reactivity using RxJS or signals instead.

No Usage of ngcc

In Angular version 9, Angular switched from its old view engine to ivy.

Angular Compatibility Compiler (ngcc) was designed to support libraries that continued to use the outdated view engine. The ngcc has been eliminated in version 16 along with all other view engine-related codes. As a result, Angular View Engine libraries cannot be utilized in v16+ and the Angular Bundle side should be reduced. Although this is a hard break in compatibility, such libraries were not officially supported.

Esbuild Dev Server

There is already experimental support for ng build using esbuild. Support for ng serve using esbuild is also included in Angular version 16. Although it is still in the experimental stage and needs some additional performance-related improvements and optimizations, it already enables a startup time that is significantly faster (at least two times) than webpack implementation.

In ng serve Angular uses Vite for the development server, and esbuild powers both your development and production builds!

Now, Angular CLI relies on Vite exclusively as a development server.

You can give Vite + esbuild a try by updating your angular.json:

...

"architect": {

"build": { /* Add the esbuild suffix/*

"builder": "@angular-devkit/build-angular:browser-esbuild",

...

Here, you need to change this to enable "@angular-devkit/build-angular:browser" to "@angular-devkit/build-angular:browser-esbuild"

Binding router Information to Component Inputs

The following router data will be readily accessible in the component as input thanks to this capability. Therefore, we can use inputs to obtain these values rather than ActivatedRoute. These might help our application by getting rid of a lot of boilerplate code.

• Router data
• Resolved router data
• params
• queryParams

// Current approach, which would still work

@Component({

...

})

class SomeComponent {

route = inject(ActivatedRoute);

data = this.route.snapshot.data['dataKey'];

params = this.route.snapshot.params['paramKey']

}

//New approach

@Component({

...

})

class SomeComponent {

@Input() dataKey: string;

@Input() paramKey: string;

//or

@Input() set dataKey(value: string){

//react to the value

};

@Input() set paramKey(value: string){

//react to the vaue

};

}

takeUntilDestroyed and DestroyRef

Slowly but surely, Angular is enabling a more functional style of coding. The addition of the DestroyRef and takeUntilDestroyed rxjs operators is one feature in this direction. These are ngOnDestroy lifecycle hook replacements. If we ever wanted to utilize ngOnDestroy in functions, we couldn't because it was dependent on classes.

@Component({})

class SomeComponent {

destroyRef = inject(DestroyRef);

store = inject(Store);

user

constructor() {

const sub = this.store.select(getUser()).subscribe((user) => {

this.user = user

});

destroyRef.onDestroy(() => {

sub.unsubscribe()

})

//OR

const sub = this.store.select(getUser()).pipe(takeUntilDestroyed())

.subscribe((user) => {

this.user = user

});

}

}

Only the constructor context is allowed to utilize the takeUntilDestroyed operator. We must supply destroyRef as an argument if we want to use it outside of the constructor.

In contrast to subscriptions in rxjs, this feature is internally employed to clean up signal impacts, thus no manual cleanup is necessary.

Migrate Your Legacy Code to New Angular 16

Connect with Angular Experts

Other Features of Angular16

• Early tests on the esbuild-based build system show a 72% improvement in cold production builds as it also enters developer preview.
• Developers can specify reactive values and communicate dependencies between them using the Angular Signals package.
• Developers will be able to easily “lift” signals to observables from @angular/core/rxjs-interop, in developer preview as part of Angular 16.
• Through a developer preview of standalone schematics, new projects can be started as standalone.
• The Jest testing framework is receiving experimental support.
• A nonce attribute can be specified by developers for the component styles that Angular inlines.
• In Angular templates, closing tags for components may be created using self-closing tags.
• To enhance the developer experience, Angular 16 introduces the option to tie route parameters to the matching component's inputs for the router.
• Support for TypeScript 5.0 is particularly notable for ECMAScript decorators that extend JavaScript classes.

Moreover, some of the features of Angular16 were introduced by the community members:

• The extended diagnostics for proper use of ngSkipHydration by Matthieu Riegler
• The introduction of provideServiceWorker to enable usage of the Angular service worker without ngModules by Julien Saguet

How to Install Angular 16?

Angular offers multiple Angular tools. Therefore, you just need to install Angular 16 via npm.

Execute the following command in the CLI.

npm install --global @angular/cli@next

Using this command, you can easily install Angular CLI’s latest version on your system.

Go Faster with Angular 16Angular version 16 follows the Angular 15 release, which was launched as a production release in November 22. Now Angular 16 is gaining momentum for better enhancements and updates coming to Angular’s reactivity and server-side rendering in the upcoming years.Moreover, the upcoming updates will help AngularJS development companies and developers to leverage developer experience and performance while developing an application for everyone.The features Angular 15 has come up with, we feel, the Angular 17 version and modern Angular would be very different from what it is right now. New updates and changes Angular are introducing right now, if we don’t stay up to date, we won’t be able to utilize the new capabilities, and our codebase may start looking like a legacy code very soon.Hence, now is the time to migrate your existing Angular project to the latest version – Angular 16 with the help of expert Angular developers from Radixweb. As a top-notch custom app development company, we will help you create a new project utilizing all the capabilities of Angular or modernize your application with Angular as per your requirements.So, what are you waiting for? Share your requirements, hire Angular developers, and let’s keep the momentum going together.