Angular v16 is available | Angular 16 new feature | What's New in #Angular16

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.

👉Angular v17 new features | What's New in #Angular17

Please follow the below link for more,

Angular 16 new features

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

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 the computation during the change detection.
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$, []);
}