A Sneak Peek into Angular 16: New Features and Enhancements

Angular 16 was released on May 3, 2023. This was a major version upgrade. As a software geek, I found this Angular update intriguing since it means a bunch of improvements over Angular 15!

So, in this blog, I’d like to discuss the top features of Angular 16 to give you a better understanding of this wonderful software!

Before we start, in case you’re new to the Angular framework, you might want to read this blog that will help you get started with it.

Now, let’s start!

Rethinking reactivity

• It helps us to improve the performance and the developer experience.
• It completely depends on backward compatibility and the inoperable with the current system and then enabling it.
• It improves performance by reducing the number of computations during the change detection.
• It enables fine-grained reactivity.

Angular signals

With the help of this signal library, we can declare each reactive value and then expose its dependencies.

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }} <button (click)="displayName('DotNet')">Click</button>
`,
})
export class App {
fName = signal('DotNet_new');
lName = signal('Office');
fullName = computed(() => `${this.fName()} ${this.lName()}`);
constructor() {
effect(() => console.log('Name :', this.fullName()));
}
displayName(name: string) {
this.firstName.set(name);
}

We are calculating the value of fullName in the code above, which is dependent on the signals fName and LName. Here, we declare an effect that is activated any time the value of any of the signals is changed.

Input = ”dotnet”, it will log into the console.

Output = “Name : dotnet office”

Ngcc or Angular Compatibility Compiler Remove

In 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. Ngcc and all other view engine-related codes were eliminated in v16.

So, Angular View Engine libraries cannot be used in v16+. Plus Angular Bundle side needs to be lessened. Although these libraries weren’t officially supported, there has been a significant gap in compatibility.

With this, Angular’s switch from the view engine to ivy is complete.

SSR with hydration

For a very long time, Angular developers have been requesting this as a major feature.

Without this, many developers who wanted to create applications with a user-facing interface (for which startup time and SEO were crucial) refrained from adopting Angular.

Bind Route Param into component inputs directly

When defining the Route param in an application, the developer with Angular 16 will have a different experience. Now, programmers can create the route configuration so that the input parameters for the defined component of the route can be directly tied to the route parameters.

Since the router param value may be provided directly to the component inputs, we do not yet need to use the ActivatedRoute to retrieve those values into the component.

This functionality will enable us to eliminate a substantial amount of boilerplate code from the application.

Now, we can set the following values as input parameters for a routing component:

• Route data – can utilize resolvers and previous data properties.
• Path parameters
• Query parameters.

const routes = [
{
path: 'contact-info',
loadComponent: import('./contactDetails'),
resolve: { contactId: () => fetchContact() }
}
];
@Component(
selector: 'contact-info',
......
)
export class About {
// "contact" is supplied a value to the contact input.
@Input() contact?: string;
}

DestroyRef introduced in lifecycle

DestroyRef and takeUntilDestroyer are two new rxjs-based operators or providers that have been added to the lifecycle hook in Angular 16. The ngOnDestroy lifecycle hook is replaced by these two procedures.

You can register the destroy call back for any specified lifecycle scope by utilizing the DestroyRef provider.

You can use this provider anywhere in the Angular application, including components, directives, embedded views, services, and pipelines.

import { Injectable, DestroyRef } from '@angular/core';
@Injectable(
...
)
export class AppService {
destroyRef = inject(DestroyRef);
destroy() {
this.destroyRef.onDestroy(() => /* code for cleanup */ );
}
}

The constructor must use the alternative provider takeUntilDestroyed. If we want to use this outside of the constructor, we must supply the destroyRef as an argument within this operation.

We can automatically clean up the signal impacts with the new operator. No manual cleanup procedures, such as a clear subscription in rxjs, are required.

Experimental Jest support

Among developers of JavaScript, Jest is one of the most used testing frameworks.

With Angular 16, Angular has responded to requests from developers by introducing trial Jest support.

All you need to do is update the angular.json file and use npm to install Jest.

// Install jestnpm install jest --save-dev // angular.json{ "projects": { "my-app": { "architect": { "test": { "builder": "@angular-devkit/build-angular:jest", "options": { "tsConfig": "tsconfig.spec.json", "polyfills": ["zone.js", "zone.js/testing"] } } } }}

In upcoming upgrades, they intend to switch all active Karma projects to Web Test Runner.

esbuild-based build system

An esbuild-based build system is introduced in Angular 16 for the development server (ng serve). This new development server is powered by Vite, and esbuild is used to create artefacts.

You can activate it even if it’s still in development preview mode by making the following changes to the angular.json file.

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

Required inputs

You can now declare input values as necessary in Angular 16.

To define one, pick the @Component decorator inputs array or the @Input decorator..

export class App { @Input({ required: true }) name: string = '';} // or@Component({ ... inputs: [ {name: 'name', required: true} ]})

Router inputs

You can avoid injecting ActivatedRoute into the components by binding route parameters into component inputs in Angular 16.

You must import RouterModule and turn on the bindToComponentInputs property in the app in order to use this app.module.ts document.

@NgModule({ imports: [ ... RouterModule.forRoot([], { bindToComponentInputs: true }) ... ], ...})export class AppModule {}

The example that follows demonstrates how to link query parameters to component input.

// Routeconst routes: Routes = [ { path: "articles", component: ArticleComponent, },]; // Component@Component({})export class ArticleComponent implements OnInit { @Input() articleId?: string; ngOnInit() { }}

Now, you may pass query parameters using the component input name when you visit the articles route. An illustration URL in this situation will seem as follows.

http://localhost:4200/articles?articleId=001

You can rename the query parameter if the input name is too long.

http://localhost:4200/articles?id=001@Input('id') articleId?: string;

You can also bind path parameters with route data.

Standalone project support

As of version 14, Angular now supports standalone components that are not dependent on modules. By enabling the construction of separate projects, Angular 16 takes development to next level.

With Angular 16, you may use the Angular CLI to create a standalone project. The ng new command must be run with the -standalone parameter. The project will then be generated without NgModules.

ng new --standalone

Other features

There are these numerous enhancements in Angular 16 that enhance the developer experience:

• Automatic pipe and component import through the language service.
• Through the CLI, support for TypeScript 5.0, ECMAScript decorators, service workers, and SCP
• CSP supports online styles
• Self-closing tags
• Stopping of support for ngcc and TypeScript 4.8

Well, now it’s time for me to sum up my ideas about this version upgrade…

Angular 16 has helped us with some important features overall. Most of these features are new to much larger updates we can expect in the subsequent versions! So that’s something to look forward to, for sure.

Here’s a quick tip: You can use the official Angular documentation to upgrade your current projects to Angular 16.

Send us an email with your thoughts about this upgrade or Angular versions in general! Do visit us at Nitor Infotech to learn about what we do. You might also enjoy this blog about the migration from AngularJS to Angular.