June, 2025 | Angular Newsletter

State Management, React, and Gemini

June 25, 2025June 25, 2025 Alain Chautard

In the 3-2-1 format of the newsletter, I’m posting a few essential articles to revisit, updates to know about, and one question to ponder:

Three articles to revisit:

Even though Signals are changing the state management landscape in Angular, it’s still a good idea to know the basics of state management libraries to make an informed decision. Here are some past tutorials to learn about actions, reducers, effects, state and store, or if you’d rather watch videos about it, I have this video course on LinkedIn Learning.

Two quick updates:

Just as we did with the Angular certification one year ago, we have relocated, updated, and expanded our React certification at certificates.dev. Check it out while the prices are at their lowest post-launch!
If you’ve ever wondered about using React instead of Angular, you might want to watch this recording of my comparison of React and Angular, feature by feature. Spoiler alert: If you know Angular, you pretty much know React, too.

One question to ponder:

If you ever hear someone claiming that Angular is done, that everybody uses React these days, or any similar nonsense, here is a resource you can mention to such people: https://www.madewithangular.com. That list is, of course, non-exhaustive, but the number of airlines and banks listed here should be plenty enough to silence doubters. And yes, Gemini, Google’s AI that beats ChatGPT in several areas, is made with Angular, too!

HTTP interceptors in Angular, using functions

June 18, 2025June 18, 2025 Alain Chautard

In the past few years, Angular has started replacing some class-based features, such as guards and interceptors, with new function-based syntaxes.

What’s interesting about interceptors is that the old, dependency injection-based approach is not deprecated and remains valid, though it’s a bit more verbose and less convenient.

That said, I just updated this 2019 tutorial of mine to cover function-based interceptors instead:

The updated tutorial includes examples for intercepting both HTTP requests and responses.

Angular Profiling in Chrome’s Performance Dev Tools

June 3, 2025June 3, 2025 Alain Chautard

Angular 20 introduced a new custom track in Google Chrome for extended information about events, change detection cycles, bindings, and more.

Here is what the track looks like – it can get toggled open or closed:

In the example above, we can see that a browser interaction triggered change detection in the AppComponent, which is pretty typical in a Zone.js-based Angular application.

The main benefit of the new track is that it ties together Angular-related information with regular browser information, such as memory usage and CPU usage, unlike the regular Angular DevTools extension, which gives Angular-specific information only.

To use the new track, ensure your project runs on Angular 20 in development mode. Then, open the browser developer tools, click on the “Performance” tab, and click the “Record” button (similar to the Angular DevTools profiler). Then, interact with the application and click “pause” when you want to stop the profiler and analyze the performance recording.

You can zoom in or out to focus on specific events of the recording and get detailed information about what happened at these different moments. This tool is perfect to detect useless change detection cycles that could be optimized by using the OnPush change detection strategy, for instance.

If you’re looking for more performance-related advice, my course “Angular Performance Optimization techniques” on LinkedIn Learning might be precisely what you’re looking for.