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 introduction of Angular 16's improved features not only streamline development processes but also promises substantial cost savings for businesses by reducing the time and resources needed for maintaining and updating web applications.
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.
