Programmierer entwickelt an Laptops
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:

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

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.

Content
  • 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)

Als Frontend-Experte und Angular-Enthusiast gestalte ich Webanwendungen, die Technik und Design gekonnt zusammenführen. Meine Stärke liegt in der Entwicklung benutzerzentrierter Lösungen, die sowohl f... mehr anzeigen

Gitlab
Kiya

... 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