Angular AI and debugging tools

This week, we’re using 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:

Two quick updates:

  • Angular 21 is scheduled for the week of November 17th.
  • The Angular AI tutor is officially available! It’s an interactive AI-based tutorial that you can chat with and gives you challenges to work on.

One question to ponder:

Do you use any of the AI features recently released by the Angular team, such as the MCP server? If not, would you like me to write a few articles about AI with Angular? Please hit reply to let me know.

Server-side rendering: SSR or SSG, what’s the difference?

I’ve covered server-side rendering in the past, but recently realized that people get confused about SSR and SSG.

What’s the difference? SSR stands for Server-Side Rendering, and it does what it says: when requested, an Angular route is rendered on the server before being sent to the client as HTML syntax.

Then, the browser loads Angular’s JavaScript code, and the process of hydration starts: Angular takes over the “static” DOM built from our server and hooks its component code to it. In other words, front-end JavaScript takes over from that point on.

SSG stands for Static Site Generation, and the process is very much the same as SSR, with one significant difference: SSG is performed at build time, not at runtime. This is important for several reasons:

  1. The pre-rendered SSG pages can be generated weeks, if not months, before being displayed in a browser, which means they can display stale data. They don’t get updated after that last ng build, though Angular will take over and hydrate them on load, just like with SSR.
  2. SSG doesn’t require a Node.js server, but SSR does. The build output of SSG can be used as-is and deployed to any web server, like a regular client-side Angular app.

Now, how to choose between the two options? Well, the good news is that it doesn’t have to be the same choice for all routes. In an SSR app, a server-side router config is generated, and that file can be tweaked to do SSR, SSG, or even just client-side rendering based on the route:

The above example makes perfect sense: An about page doesn’t change between builds. It can be pre-rendered with SSG.

A profile page depends on user data, so this doesn’t make sense to pre-render at build time. SSR or client-side rendering are the two best options.

Last but not least, what if we want to pre-render routes that use parameters? We can do so by adding a list of param values to pre-render routes with the getPrerenderParams function:

The above example would have the Angular compiler pre-render the routes for /post/1/foo/3 and /post/2/bar/4 at build time.

Dates, pipes, and coupons!

This week, we’re using the 3-2-1 format of the newsletter again. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder:

Three articles to revisit:

  • Still using Moment.js for date formatting? Take a look at date-fns as a possible alternative.
  • If you’re using the date pipe anywhere, including in your TypeScript code, knowing how to format dates without pipes might help.
  • Also, if you’re constantly using the same date format with your pipes, you can set the default format once for all, so you don’t need to repeat yourself in all your templates.

Two quick updates:

  • I’m speaking at the International JavaScript conference in New York City, and I’m pretty much running the entire Angular track at the event, with two talks and one full-day workshop. The event can also be attended remotely from home. As a reader of this email, you can get 10% off your conference ticket by using coupon code ijsny-alain. And we’re also throwing a certificates.dev coupon in a mix, you can get $25 Off ANY mid-level or senior certification using code IJCNY25.
  • Angular Signal Forms will officially become experimental in Angular 21, and the first documentation is now live! You can start exploring the new signal forms API to see how forms will work with Angular’s signal-based approach.

One question to ponder:

Are you ready for Angular 21? If not, what’s your biggest concern or impediment to upgrade? The introduction of experimental Signal Forms is just one of many changes coming that might reshape how we build Angular applications.

Signal Forms Preview + AI event

This week, we’re using the 3-2-1 format of the newsletter again. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder:

Three articles to revisit:

Two quick updates:

  • Angular Signal Forms are coming soon, and Matthieu Riegler created a Stackblitz playground for you to explore the basics of the API with a simple example.
  • Next week, the Angular team has a live AI event on YouTube, free to sign up for and watch.

One question to ponder:

Do you use Reactive forms? If so, why did you choose them over template-driven forms? If you’re ready to change your mind or learn something new, this video from Ward Bell is really interesting.

ngModel, model(), and 2-way bindings in general

This week, we’re back to 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:

Two quick updates:

One question to ponder:

What’s new in Angular 20.2?

Another month, another minor version of our favorite front-end framework!

Zoneless

This time around, Zoneless change detection becomes stable (more about Zoneless here), so you can remove Zone.js from the equation if you’ve followed the rules to make sure Angular will detect your changes properly with OnPush-compatible components.

Animations

The @angular/animations package is deprecated and replaced with a new API using the animate.enter/animate.leave syntax as follows:

 <div animate.enter="fade-in" animate.leave="fade-out">My content</div>Code language: HTML, XML (xml)

Aliases in blocks

You can use local aliases in if, else, and else if blocks as follows:


⁠@if (currentUser(); as user) {
  Welcome user {{ user.name }}!
} @else if (expiredSession(); as exp) {
  Please log in. Your session expired at {{ exp.time }}
}Code language: JavaScript (javascript)

New diagnostics

Diagnostics give you hints and feedback on possible mistakes. These apply to instances where your code compiles but is likely doing something wrong. A new diagnostic called uninvokedFunctionInTextInterpolation has been added to warn you when you use a method in a template without calling it (forgot the parentheses).

Testing

You can now use a headless browser with your Vitest unit tests using the builder introduced in v20. This is still experimental, though.

As a reminder, here are the updates from the previous version, Angular 20.1.

Visualizing internal dependencies with Madge

When working on large Angular projects, managing dependencies between files and modules can become a significant challenge. Madge is a developer tool that visualizes and analyzes module dependencies in JavaScript applications, making it an excellent companion for Angular developers.

Here is how to give it a try:

  1. Install madge: npm install -g madge
  2. In the root folder of your project, run: npx madge src/main.ts --ts-config tsconfig.json --image ./deps.png

This command will go through your entire application and create a dependency graph as an image in deps.png:

This can be used to identify circular dependencies, visualize relationships between your different components and services, and identify spaghetti code scenarios.

Note that Madge has other specific commands, such as one to detect circular dependencies:
npx madge --circular src/main.ts --ts-config tsconfig.json

Or that one to detect dead code (code that is never referred to anywhere in your app):

npx madge --orphans src/main.ts --ts-config tsconfig.json

You can find more information on Madge’s NPM page here.

Injection context, Angular talks, and more!

This week, we’re back to 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 (maybe four) articles to revisit:

  • Have you ever used ElementRef in Angular? It’s a way to access DOM elements natively, which can come in handy when integrating with some 3rd party libraries.
  • With the introduction of takeUntilDestroyed and the inject function, it has become more important than ever to understand what is an injection context.

Two quick updates:

  • A talk I’m looking forward to: The Angular team is presenting a “Deep Dive into the Angular Signal Forms” at Angular Connect on September 13th. Could it be a sign of imminent release in developer preview? Wait and see…

One question to ponder:

  • With Angular Signals now in the mix, many are rethinking their state management strategy. If you’re a long-time user of a state management library, has your perspective shifted? Knowing what you know now, would you still reach for a library on a new project?

Angular Newsletter Survey

It’s been quite some time since I last asked for feedback about the newsletter, and since we’re in the midst of summer and things tend to be a bit slower during that time of year, I thought now would be a good time to ask for your feedback.

Here is the feedback form for you, with just five quick questions and the option to provide more elaborate feedback if you wish. I’m always looking for external contributors, too, so feel free to let me know if you’d like to write about something interesting.

The regular newsletter will be back next week with a full article on the blog.

What’s new in Angular 20.1?

Angular 20.1 was just released by the Angular team, with a lot of good tools for improved developer experience:

Developer Tools

  • Signal Dependency Graphs: The Angular devtools extension includes an experimental feature to visualize the dependencies between signals in a graph. You can also inspect a signal and jump directly to its definition in the code. Signals also “blink” in the graph when their value changes.

Testing

  • Simplified Component Testing: New binding helpers (inputBinding(), outputBinding(), twoWayBinding()) allow you to set a component’s bindings directly during testing, without doing manual assignments or using wrapper components.

Performance

  • Optimized Template Compilation: The Angular compiler now uses more efficient, DOM-only instructions for elements that don’t have any directives applied, leading to better runtime performance.

Templates

  • Assignment Operators: You can now use assignment operators like +=, -=, and *= directly in your component templates.
  • NgOptimizedImage Decoding: The NgOptimizedImage directive now includes a decoding option, which can be set to async to avoid blocking the main JS thread.

HTTP Client

  • New HttpClient Options: A variety of new options have been added to HttpClient, including timeout, cache, priority, and credentials, giving you more control over HTTP requests and helping to improve Core Web Vitals.

AI and Angular CLI

  • AI-Assisted Development: Angular is integrating with AI development tools through the new ng mcp command, which starts a Model Control Protocol (MCP) server. This allows AI tools to better understand your Angular workspace for more accurate suggestions.
  • New Asset Loaders: The CLI now supports dataurl and base64 loaders, allowing you to inline small assets directly into your application’s code.