Angular 16 Release 🚀

TLDR: Angular v16 ist da und bietet eine Vorschau auf ein neues Reaktivitätsmodell, das eine einfachere mentale Modellierung, bessere Laufzeitleistung und RxJS-Interop ermöglicht. Es gibt auch eine neue Signale-Bibliothek, die eine neue Art der Komponenten-Deklaration ermöglicht und in Zukunft zone.js ablösen könnte. Die vorgestellten Codebeispiele zeigen die Verwendung von Signalen und die Verwendung des neuen RxJS-Operators "takeUntilDestroy", der dazu dient, den Lebenszyklus eines Observables an den eines Angular-Komponenten-Lifecycles zu binden.

Es fällt auf, dass sich das Entwicklerteam von Angular zunehmend verändert, was insbesondere durch die Anfragen der Community nach neuen Funktionen deutlich wird. Es bleibt also spannend, was dieses Jahr noch passieren wird und ob zone.js bereits dieses Jahr optional werden wird.

Ebenfalls wurde schon bekannt gegeben, dass mit Angular 17 alle legacy components von Angular Material entfernt werden und es wird empfohlen bis dahin die in der Dokumentation zu finde Migration durchführen soll.

Verwendung von Signalen:

@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    {{ fullName() }} <button (click)="setName('John')">Click</button>
  `,
})
export class App {
  firstName = signal('Jane');
  lastName = signal('Doe');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    effect(() => console.log('Name changed:', this.fullName()));
  }

  setName(newName: string) {
    this.firstName.set(newName);
  }
}

Die Verwendung des RxJS-Operators "takeUntilDestroy":

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

Developer-Server Vite + esbuild zu nutzen:

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

Wer jetzt neugierig geworden ist, sollte sich den Blog-Artikel von Minko Gechev anschauen