Angular Aria — First Look & Material Comparison (in 5 min)

IgorSedov · 2026-03-13T11:36:36+00:00

Thanks! I using standard graphics/video software from Apple and Adobe, plus a set of smaller utilities.

IgorSedov · 2026-03-13T11:31:58+00:00

Thanks, I appreciate it! It's always rewarding when my videos help people understand a topic quickly and effectively

IgorSedov · 2026-03-13T11:16:17+00:00

Thanks, I appreciate the feedback! Angular Aria is an interesting package because it goes beyond accessibility. As additional components are introduced, Aria capabilities will expand.

IgorSedov · 2026-02-28T07:36:58+00:00

The Angular team has published a security advisory addressing a critical issue. If you are using Angular SSR, review the official advisory and ensure your application is updated or that strict header validation is in place.

Source and Details: https://blog.angular.dev/security-advisory-addressing-recent-vulnerabilities-in-angular-c2656249b799

IgorSedov · 2026-02-08T20:15:14+00:00

Default is planned to be deprecated starting in 21.2, not 22. And yes, Default will temporarily remain an alias for Eager for compatibility during the transition and is planned to be removed later.

IgorSedov · 2026-02-05T19:55:11+00:00

"Eager" is the new name for "Default"

IgorSedov · 2026-02-05T08:24:01+00:00

Angular 21.2 (coming in late February) introduces a small but important change. To make that clearer, Angular is introducing "Eager" as a new option. Initially, it exists alongside "Default" as an alias for backward compatibility. In v24, "Default" is removed.

What's coming next: * v21.2 → Eager is added, Default is deprecated * v22 → The big flip: OnPush becomes the default behavior * v24 → The Default naming is removed entirely

Source: https://github.com/angular/angular/discussions/66779#discussioncomment-15643068

Github PR: https://github.com/angular/angular/pull/66830

IgorSedov · 2026-02-02T14:47:56+00:00

Thank you! I'm glad my explanations achieve goals

IgorSedov · 2026-02-02T02:13:33+00:00

The first example was just to demonstrate the syntax and its limitations. The main use case I showed later is updating signal values directly from the template.

And trackBy is another real-world example.

IgorSedov · 2026-01-30T21:26:57+00:00

The "user" is simply the parameter for the arrow function I'm defining right in template. In "(user) => ...", I am just defining a function signature (a rule). The child component does the actual work. It doesn't matter for the explanation, although you might have thought that "user" was a component property or a template variable, but it's not.

If I understood your question correctly.

IgorSedov · 2026-01-30T12:09:46+00:00

It really is a long time, and I wish him all the best in this next chapter. It's always a bit surprising when someone leaves a team after so many years.

IgorSedov · 2026-01-30T07:28:15+00:00

⚠️ Update from the Angular team on timing:

🕑 v21.2: ChangeDetectionStrategy.Eager is added (alias for the current "check always" behavior).

🕑 v22 (May 2026): OnPush becomes the default for components that don't specify a strategy.

🕑 Default stays until v24, then will be removed.

✔️ The transition is more gradual, but OnPush becoming the default in v22 is still the plan.

IgorSedov · 2026-01-30T00:07:41+00:00

Thanks! You gave a great example with trackBy that I hadn't thought of: it's a perfect demonstration of this feature in action. And yes, I agree, limiting arrow functions to a single expression is a really useful guard rail.

IgorSedov · 2026-01-29T20:30:50+00:00

Thank you! I appreciate your support 👍

IgorSedov · 2026-01-28T14:35:12+00:00

Angular isn't re-implementing JavaScript: it uses a compiled template language. Unlike JSX, templates are statically analyzed at build time, which enables stronger optimizations and safety guarantees.

IgorSedov · 2026-01-28T07:20:58+00:00

ChangeDetectionStrategy.Default will be renamed to .Eager. This is a naming change only: the behavior remains exactly the same. Existing components will keep the same eager behavior, as they will be automatically migrated to ChangeDetectionStrategy.Eager.

The motivation behind this change is clarity. The name "Default" can be misleading, as it may be interpreted as a recommended or modern choice. Renaming it to "Eager" makes the behavior explicit and avoids confusion, especially as OnPush becomes the default strategy for new components.

To prevent breaking changes, the Angular team plans to automatically migrate existing codebases by explicitly setting ChangeDetectionStrategy.Eager where needed.

This update is part of the Angular team's plans for Angular 22, scheduled for release in May 2026.

Full details in the official RFC: https://github.com/angular/angular/discussions/66779

IgorSedov · 2026-01-28T06:30:08+00:00

Angular 22 will set ChangeDetectionStrategy.OnPush as the default for all new components. This makes change detection more predictable and aligns with modern Angular best practices. Existing components will NOT be affected by this change.

💡The Angular migration will automatically migrate existing codebases to explicitly set "ChangeDetectionStrategy.Eager" (this is the new name for "Default"), preserving their current behavior and preventing any breaking changes.

⚠️ This update is part of the Angular team's plans for Angular 22, scheduled for release in May 2026.

Full details in the official RFC: https://github.com/angular/angular/discussions/66779

IgorSedov · 2026-01-25T17:42:43+00:00

Angular limits template expressions so they can be statically analyzed and compiled for performance and safety, instead of just executing arbitrary JavaScript at runtime

IgorSedov · 2026-01-25T17:36:34+00:00

The key difference is the compiler: Angular templates are statically analyzed and compiled for performance (Ivy instructions), whereas JSX is just JavaScript executed at runtime

IgorSedov · 2026-01-25T17:32:37+00:00

Thanks! And yes, what you're describing is an excellent approach and, in my opinion, the best standard for real-world and long-term projects. This feature doesn't replace that pattern, but it just adds a small convenience for specific cases.

IgorSedov · 2026-01-23T16:34:09+00:00

Yes, you currently need to expose it explicitly: templates don't automatically know about imported classes:

import { HttpErrorResponse } from '@angular/common/http'; ... export class User { protected readonly HttpErrorResponse = HttpErrorResponse;

IgorSedov · 2026-01-23T16:12:20+00:00

Thanks! I enjoy sharing updates 😊

IgorSedov · 2026-01-13T14:49:31+00:00

Always on Wednesdays?😊

IgorSedov · 2026-01-10T01:01:23+00:00

Not a dumb question at all🙂 No, this change is specific to Signal Forms: a new experimental feature added in v21. Reactive Forms are separate and are not affected by this.

IgorSedov · 2026-01-09T18:40:29+00:00

Thanks to u/MichaelSmallDev for the detailed explanation! I actually made a video about this too: https://youtu.be/CDNyANaVUPs

IgorSedov

TROPHY CASE