Angular 22 stable resources and Signal Forms are the headline topics, together with new dependency injection APIs such as @Service and injectAsync. Also in brief: debounced(), Vitest migration support, ChangeDetectionStrategy.Eager, WebMCP, community write-ups, and the ng-neat recovery.
Stable resources and Signal Forms
Angular 22 is out. Probably the most outstanding feature is the stabilization of the resource and the Signal Forms. There's much more but let's start with these two.
Resources, that are three functions resource(), rxResource() and httpResource(), have been introduced during Angular 19. There were some significant changes in Angular 20, and then in Angular 21 we got the snapshot feature. Resources have been experimental all the time, and after almost 1.5 years, they leave experimental status and become stable.
Similar story for Signal Forms, but at a just faster pace. They were introduced in 21 and are now also stable, so no developer preview either.
So in some way, these are features we already knew and some of us were already using quite successfully.
And let's not forget, also @angular/aria, the headless design system also became stable.
blog.ninja-squad.com
@Service, injectAsync, and debounced()
But, there are new features as well.
For one, we have the @Service decorator. That means it is on one side a shortcut for @Injectable({ providedIn: 'root' }) and on the other prevents using dependency injection via the constructor. Instead of constructor-based DI, you should go with the inject function and there is a dedicated migration available (ng generate @angular/core:inject).
@Service()
export default class NewsletterClient {
private httpClient = inject(HttpClient);
send(email: string): Observable<boolean> {
return this.httpClient.post<boolean>(
'http://some.host.com/newsletter/subscribe',
{ email },
);
}
}
Another feature for dependency injection is the asynchronous injector. So the value returned by injectAsync is not the service instance itself - you call it when you need the service and await the result. Why do we need it? Well, same thing why we do lazy loading in the router. We only want to load when it is actually needed.
export class NewsletterPage {
private readonly newsletterModel = signal({ email: '' });
private readonly newsletterClient = injectAsync(
() => import('./newsletter-client'),
);
protected readonly newsletterForm = form(
this.newsletterModel,
(path) => { },
{
submission: {
action: async () => {
const client = await this.newsletterClient();
client.send(this.newsletterModel().email)
},
},
},
);
}
So you won't use injectAsync when you need the service immediately but more when a user clicks on something or some later events. The service needs to be providedIn: 'root'. So it's best if you already apply the new @Service decorator.
And we have a debounced function. You give it a signal and a debounce time, and you are getting back a resource. Debouncing means, when the signal's value changes, the value in the derived resource would wait for the defined period of time until a new value comes. If that's not the case, then the resource will take on that value, and if not, the debouncing starts again.
As every Signal has an initial value, the debouncing for the first value doesn't happen.
@Component({
selector: 'app-debounced',
template: `Value {{ debouncedCounter.value() }}`,
})
export class DebouncedPage {
protected readonly counter = signal(1);
protected readonly debouncedCounter = debounced(this.counter, 600);
constructor() {
setTimeout(() => this.counter.update((v) => v + 1), 500);
setTimeout(() => this.counter.update((v) => v + 1), 1_000);
setTimeout(() => this.counter.update((v) => v + 1), 1_500);
effect(() => {
console.log(`value updated ${this.debouncedCounter.value()}`);
});
}
}
debounced() is experimental. @Service and injectAsync are not.
Angular 22: The Most Important New Features at a Glance - ANGULARarchitects
Angular 22 stabilizes the Resource API and Signal Forms, makes OnPush the default change detection strategy, and brings @Service, injectAsync, debounced, as well as numerous template and router improvements. This article shows the relevant updates using concrete examples.
angulararchitects.io
Vitest and change detection
In Angular 21, we've received Vitest as the new default testing framework. It was not possible to easily migrate because a lot of us were using fakeAsync or waitForAsync to manage asynchronous tasks in tests. With Angular 22, that is possible again, but remember, fakeAsync and waitForAsync depend on zone.js. So if you have plans to move to zoneless or are already there, it is not an option.
If you run ng update, your components which are not OnPush will get a ChangeDetectionStrategy.Eager. That's the new alias for the old Default value, because default is not OnPush. Speaking of zoneless, if you want to migrate, staying with zone.js and moving all your components to OnPush as an intermediate step is a good approach.
WebMCP
Also in terms of AI, there is experimental support for WebMCP. That means an agent can connect to your web application and can execute certain tool calls. That means, you in Angular have to expose calls to services with a description and so on, and then if the browser supports it, the agent can call them. So it is not necessary anymore that the browser has to read and interact with the DOM.
WebMCP is still in development, but we can expect to hear more from it in the future. There is also a feature which sets up forms for WebMCP.
Community content
As always, there is a lot of community content out there. We had a release video, a release blog and Mark Thompson, Angular's DevRel, was also guest at the Angular Plus Show.
For this episode, we additionally used the blogs from Cedric Exbrayat from Ninja Squad, Manfred Steyer from Angular Architects, and Mateusz Stefańczyk from House of Angular.
Angular 22: The Most Important New Features at a Glance - ANGULARarchitects
Angular 22 stabilizes the Resource API and Signal Forms, makes OnPush the default change detection strategy, and brings @Service, injectAsync, debounced, as well as numerous template and router improvements. This article shows the relevant updates using concrete examples.
angulararchitects.io
ng-neat GitHub
Last but not least, a very important information. Last weekend, the popular ng-neat organization was removed from GitHub. That contained widely used libraries, like Elf for state management and Spectator for testing. Before that, members of the organization were also removed. At the moment, we don't know why because there was no official communication from the owner.
What is important though, that most of the libraries have been recovered and found their way back to GitHub under a new organization called ngneat-archive. We will keep you updated on this topic.
Top comments (0)