Angular 16 - Developer Specific Features

Hello There! Continuing my Angular versions new features learning series, and this the time for the current latest Angular version Angular 16. So far Angular is adding so many interesting features in previous launches and lets see what it is offering in this version. You can find my previous version blogs here - Angular 15, Angular 13&14 & Angular 12. Lets see the Angular 16 new developer specific features now.

Angular Signals

In this release, Angular has introduced the first reactivity primitives and those are ‘Signal’, ‘Computed’ and ‘Effect’. The signals are used to set or update the values and notify the consumer the values have been changed. It can hold a simple value or a complex data structure. Here is the example of signal

//declare signal
const  color = signal(‘Red’);

//get the signal value
console.write(‘The selected color is ’ +  color()); //Output - Red

//set the signal value
color.set(‘Green’); .
console.write(‘The selected color is ’ +  color()); //Output - Green

There are more functions which signal provide like, update, mutate etc.

The **Effect **is used to notify consumers that the signal’s value is changed. For example,

effect(() => { console.log(`The current color is: ${color()}`); });

And this callback will execute when the signal value is changed. Effects are rarely used in an application code but there are few scenarios where it can be used, like syncing data in local storage etc.

Enhanced Hydration

Basically, Hydration is the process of restoring the server side rendering application on the client side. This enhancement in Angular can improve the page load performance. Initially, when Angular was rendered on the page, the framework would discard the existing DOM nodes and used to re-render them from scratch. But now, developers can opt-in Angular reusing these existing DOM nodes.

Faster Build with the esbuild

Angular 16’s CLI builder is based on the esbuild. An esbuild claims ‘An extremely fast bundler for the web’ This new thing is improving the build time significantly in this new version. To enable this feature, developers need to add the configuration in the angular.json

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

Standalone Component Migration and Scaffolding

The standalone components were first introduced in Angular 14 and they became more stable in Angular 15. Now Angular 16 has introduced the migration semantic and standalone migration guide and these tools are very useful in reducing the time required to move the code to standalone components. Also you can generate the whole new angular application with standalone components with below command

ng new --standalone

Required Inputs

This is the easy way to mark the component or directive input as required. This new feature was newly introduced in Angular 16. Below is an example,

export class EmployeeDetails {
  @Input({ required: true }) employeeName: string;
}

The above are some interesting developer specific new features introduced by the Angular 16. There are also few breaking changes developer needs to keep in mind while upgrading to the version 16

1. Supported Node version for Angular 16 is node.js v16 or v18
2. Supported Typescript version for Angular 16 is TS version 4.9 or later.
3. Angular compatibility compiler (ngcc) is removed - The view engine was removed in Angular 13 and now ngcc is removed in version 16.
4. Angular package format changed.
5. ReflectiveInjector has been removed.
6. Updated behavior for Router.createUrlTree.

Conclusion

So these are the details on the angular version upgrade, developer specific changes. Same as the previous version upgrades, angular has brought new and interesting features in Angular 16 as well! Looking forward for more in the future!!

Happy Reading! Happy Coding!