Angular V16 is Now Available| Angular 16 new feature

Introduction

Angular v16 has released in May 2023; in this article, we will discuss new features introduced in angular v16

Last year Angular 15 was released in November 2022 with some new features, including performance improvement and standalone components and API. So now (May 2023), Angular V16 has been released with some new features and enhancements.

Please follow the below link for more,

1. Angular 14 Features
2. Angular 15 Features

Angular 16 new features

1. Rethinking Reactivity
2. Angular Signals
3. RxJS interoperability
4. Server-side rendering 
5. hydration enhanced
6. Improved tooling experience for standalone components, pipes, and directives
7. Advancing developer tooling
8. Better unit testing using Jest and Web Test Runner
9.  Autocomplete imports within the HTML templates.      

Rethinking Reactivity

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

Angular Signals

Now just like the signals we used in React, it is available in Angular V16 as well.

This signal library allows us to define all the reactive values and then expose their 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);
  }
}

In the above code, we are computing the value of fullName, which depends on the signals fName and the LName. Here we declare an effect, which executes every time we make changes in the value of any of the signals.

When we give the value off the Name ”dotnet”, it will log into the console.

"Name : dotnet office"

RxJS interoperability

Now we will able to use signals in observables using functions by using below CLI command which is still in preview @angular/core/rxjs-interop

Convert observable to signal 

import { signal,toObservable } from '@angular/core/rxjs-interop';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class App {
  count = signal(0);
  count1 = toObservable(this.count);
 
  ngOnInit() {
    this.count1.subscribe(() => ..);
  }
}

Convert Signal to observable

import { signal,toObservable,toSignal } from '@angular/core/rxjs-interop';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: `
  <li *ngFor="let row of data()"> {{ row }} </li>
`,
  styleUrls: ['./app.component.css']
})
export class App {
  dataService = inject(DataService);
  data = toSignal(this.dataService.data$, []);
}

Server-side rendering and hydration enhanced

1.    So the Angular team has done enhancement in performance with the help of the Chrome Aurora team.
2.   They have improved the server-side rendering.

Reference: https://blog.angular.io/angular-v16-is-here-4d7a28ec680d