Web background
Dennis, Kiya | 05.7.2023

Angular 16 Release: New Reactivity Model and Features

Web > Angular 16 Release: New Reactivity Model and Features

Angular 16 is here, offering a preview of a new reactivity model that allows for simpler mental modeling, improved runtime performance, and RxJS interoperability. Moreover, a new signals library has been introduced, providing a new way of declaring components which could potentially replace zone.js in the future. The featured code examples illustrate the use of signals and the new RxJS operator 'takeUntilDestroy' that helps to bind the lifecycle of an Observable to that of an Angular component lifecycle.

The Angular development team seems to be evolving, primarily influenced by community requests for new features. So, it becomes thrilling to see what else will happen this year and if zone.js will become optional within this year.

Another notable update is that with Angular 17, all legacy components from Angular Material will be removed. Hence, it is recommended to perform the migration mentioned in the documentation until then.

Usage of signals:

2  selector: 'my-app',
3  standalone: true,
4  template: `
5    {{ fullName() }} <button (click)="setName('John')">Click</button>
6  `,
8export class App {
9  firstName = signal('Jane');
10  lastName = signal('Doe');
11  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
13  constructor() {
14    effect(() => console.log('Name changed:', this.fullName()));
15  }
17  setName(newName: string) {
18    this.firstName.set(newName);
19  }

Usage of the RxJS-Operator "takeUntilDestroy":

1   data$ = http.get('...').pipe(takeUntilDestroyed()).subscripe();

Utilizing Developer-Server Vite + esbuild:

1"architect": {
2  "build": { /* Add the esbuild suffix  */
3    "builder": "@angular-devkit/build-angular:browser-esbuild",

Those interested can read more in Minko Gechev's blog article.

  • What's New in Angular 16?
  • What is the New Reactivity Model in Angular 16?
  • How to Use Signals in Angular?
  • How to Use the New RxJS-Operator 'takeUntilDestroy'?
  • What Changes Can We Expect in Angular 17?
Dennis Hundertmark
Dennis (Softwareentwickler)

... ist ein begeisterter Frontendentwickler aus Hannover. Am liebsten arbeitet er mit TypeScript und am allerliebsten mit Angular. Schnelles, effizientes Arbeiten und saubere Testabdeckung liegen ihm... mehr anzeigen


... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund