Angular Performance tools and suggestions

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:

  • This series shows how simple template changes can impact performance: part 1 – part 2 – part 3.

Two quick updates:

  • Angular v20.1 is coming soon (the first RC is out) with new options and improvements for httpResource regarding authentication and caching.
  • The Angular team just posted more details about the new devtools track in Chrome, and it’s definitely a big improvement in terms of data integration, all in one place. The article features a few screenshots explaining the different colors used in the track, which seems well thought out and useful.

One question to ponder:

Do you use TypeScript path mapping to simplify your TS imports? If not, here’s what it does and how to enable it.

State Management, React, and Gemini

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:

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

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

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.

Angular 20 is available, and FrontEnd Nation is next week

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 updates worth knowing about:

  • Angular 20 is officially available! You can watch this video from Google/IO about what’s new in Angular and tune in at 9 am US/Pacific tomorrow on the Angular team’s YouTube channel for a live launch event.
  • With Angular 20 comes a new style guide with different naming conventions and a new set of best practices. I’ll cover those in more detail in future newsletters, but the style guide is worth taking a look at now that it has been officially released.
  • Next week, FrontEnd Nation will have a track on Angular with a v20 talk by Minko Gechev. I’ll be speaking about resources, the most game-changing API in Angular since the launch of Signals. The event is free to attend; all you have to do is register and tune in.

Two short articles to revisit:

One question to ponder:

  • You’ve probably heard about “Zoneless” Angular, but do you know what that means? I you don’t, please reply to that email and I’ll cover that topic in a next edition of this newsletter.

Angular at Google I/O 2025

Alain Chautard

I’m writing this post from Google I/O, the annual conference where Google announces updates about all its products and services. This year, AI was everywhere and dominated most sessions, yet we received a good update from the Angular team about what to expect for Angular 20 and later this year:

First, a few confirmed items for Angular v20:

  • linkedSignal becomes stable, graduating from developer preview
  • Zoneless Angular will be available in developer preview
  • Vitest support for unit tests as an experiment
  • Angular custom track in Google Chrome performance dev tools tab for Angular-specific insights on performance
  • SSR: Event replay is enabled by default
  • A list of new AI resources for Angular: https://angular.dev/ai
  • Angular 20’s official launch event is on May 29th at 9 am US/Pacific.

Signal Forms are a work in progress, with a first prototype branch here, but nothing’s fully working yet, so take a look only if you’re curious about what the future of Angular forms could look like.

What else about Google I/O?

If you’re curious about what was announced at Google I/O, I’d recommend this 10-minute short recap video.

Generative AI is improving super quickly, and I was able to generate this 8-second video from a single picture taken with my phone – none of the movement you see in here actually happened, it was all AI-generated using Veo 3, the latest AI engine for video generation from Google. Some of the video examples are truly impressive.

Angular Performance, NgRx, and v20

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:

Two updates worth knowing about AND three short articles to revisit:

  • Angular 20 is getting closer and closer! The first release candidate, 20.0.0-rc.0 was released earlier last week. The team is on track for a release before the end of May.

One question to ponder:

  • Do you still use webpack or migrated to the new application builder using esbuild and Vite?
    The new builder is so much faster that you should migrate.
    The easiest way to know is to look at your angular.json file build section:

Tips on types, @defer, and more!

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 short articles to revisit:

  • TypeScript is one of the best tools in the Angular toolbox, especially when using types properly. You can (and most likely must) use types with generics and the HttpClient to specify the type of your data responses. This also applies to signals (as shown in these examples), resources, subjects, and everything else. And always remember that using any is evil.

Two updates worth knowing about:

  • The recording of my 1-hour talk “Intro to Cypress for end-to-end testing” can be found on YouTube. It was too short to cover everything, but it still gives a good overview of what Cypress is all about.
  • Google I/O is coming soon on May 20-21. It’s a free hybrid event to learn about the latest in Angular, web technologies, and even AI and all things Google if you’re so inclined.

One question to ponder:

  • Have you considered using @defer in your apps? It’s the most flexible and configurable option to speed up your Angular applications with lazy-loading and rendering. For instance, if your application has very long pages with a lot of scrolling, you could lazy load the bottom of such pages while scrolling (or using other triggers), making the initial page load much faster.

Angular Can I Use, Global Summit, and more!

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 short articles to revisit:

  • Whether you use RxJs Subjects or Angular Signals for reactivity, using the right visibility modifier in TypeScript can help you expose your application state in a safe, read-only manner. These articles highlight the “why” and the “how” of visibility modifiers. They also cover different interesting syntax options.

Two Angular updates worth knowing about:

  • Angular is evolving rapidly, and new APIs are introduced with both minor and major versions. Some are experimental, some are in developer preview, some are stable, while others get deprecated over time. With Angular Can I Use, you can know the status of any feature in just seconds:
  • The recording of Geekle’s Angular Global Summit is now available for free on YouTube. With talks from Manfred Steye, Stephen Flui, yours truly, and many others, I’m sure you’ll find interesting talks in that video!

One question to ponder

  • Did you know that with the new @for block, you don’t need to declare local variables? You can use $even, $index, and other contextual variables directly:

    Instead of this:
    @for (item of items; track item.id; let idx = $index) {
    {{idx}} - {{item.name}}
    }

    You can do just the following:
    @for (item of items; track item.id) {
    {{$index}} - {{item.name}}
    }

Selectorless update, more conferences, and free videos!

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 (or four) Angular updates to know about:

  • The Angular team started teasing its new “selector-less” RFC with some examples of what this could look like. The goal is to get rid of component and directive selectors (and hopefully extra imports) and this could be available as an experiment as soon as Angular v20:

  • We now have a date and location for ng-conf 2025: October 17-18 in Baltimore, USA. The event is moving closer to Europe and will be preceded by JSConf North America at the same venue on October 14-16.
  • All videos from FrontEnd Nation Angular Day are now available on this Youtube playlist.
  • You can already register for free for the next FrontendNation Event (3-5 June) at https://frontendnation.com/

Two articles to revisit:

  • None this week, lots of videos to watch in the previous section!

One little thing to ponder:

  • Did you know that instead of using [class]=" isImportant ? 'highlight' : ' ' " you can do [class.highlight] ="isImportant" in your templates?