Angular 22. New Features and Improvements
A new version of Angular, Angular 22, was released recently. This release includes many updates aimed at improving the performance of Angular applications.
In this video, we’ll explore new template features, a new decorator for services, injectAsync, and resources. In the next video, we’ll take a closer look at signal forms.
app.ts
import {ChangeDetectionStrategy, Component, signal, WritableSignal} from '@angular/core';
import {UsersComponent} from './users/users.component';
import {httpResource} from '@angular/common/http';
import {JsonPipe} from '@angular/common';
@Component({
selector: 'app-root',
imports: [
UsersComponent,
JsonPipe
],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
protected userId: WritableSignal<number> = signal(1);
protected users = ['Admin'];
protected currentUserRole: 'admin' | 'editor' | 'viewer' | 'moderator' = 'moderator';
protected userResource = httpResource(() => `https://jsonplaceholder.typicode.com/users/${this.userId()}`)
protected increaseId() {
this.userId.update(id => id + 1);
}
}
app.html
<!--
1. Change detection onpush by default
2. Template updates
3. @Service() decorator
4. injectAsync
5. Resource/httpResource
6. Signal forms
-->
<app-users [users]="[...users, 'Kamil']"></app-users>
@switch (currentUserRole) {
@case ('admin') {
<p>I'm admin</p>
}
@case ('editor') {
<p>I'm editor</p>
}
@case ('viewer') {
<p>I'm viewer</p>
}
@case ('moderator') {
<p>I'm moderator</p>
}
@default never;
}
<hr>
<p>User id: {{userId()}}</p>
@if(userResource.isLoading()) {
<p>Loading...</p>
}
@if(userResource.hasValue()) {
{{userResource.value() | json}}
}
<button (click)="increaseId()">Increase id</button>
users.service.ts
import {Service} from '@angular/core';
@Service()
export class UsersService {
public updateUsers() {
console.log('Users were updated');
}
}
users.component.ts
import {Component, injectAsync, input, InputSignal, signal} from '@angular/core';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrl: './users.component.css',
})
export class UsersComponent {
public users: InputSignal<string[]> = input<string[]>([]);
protected usersService = injectAsync(() =>
import('../users.service').then(s => s.UsersService));
protected async updateUsers() {
const users = await this.usersService();
users.updateUsers();
}
}
users.component.html
<p>users works!</p>
<ul>
@for (user of users(); track user) {
<li>{{user}}</li>
}
</ul>
<button (click)="updateUsers()">Update users</button>
0 Comments