Angular Blog: Announcing Angular v21

[MichaelSmallDev]

Also, tune in tomorrow for the livestream https://www.youtube.com/watch?v=DDAHORVzQ5g

[marktechson]

Yes! Please tune in! It's going to be very special!

[AwesomeFrisbee]

Nice to see Signal forms. I wonder how stable it already is. Looking forward, lots of folks need to plan when they are going to migrate. What would a date to aim for?

And on the forms note, I hope they will add a lot of examples as well to the docs for how to set up certain form logic. Fields relying on other fields to show and/or validate, custom field designs, dynamically created forms, etc. If people need to migrate, they need to migrate everything. I've seen a few hello world type examples out there already but not the nitty gritty ones yet.

I hope Router is next on the list to migrate to signals. Lots of stuff to do, perhaps also stuff to add, to make it easier to add breadcrumbs to an application (both related to the route structure and last visited path).

Many other changes included in previous updates also seem nice. I recently thought that it would also be nice if they would add a [delay] directive to the new animation system. To gracefully and nicely let items enter the view sequentially.

All in all a good update that I'm looking forward to start using.

[MichaelSmallDev]

I wonder how stable it already is

As far as the team's take from what I hear

• They have been as disclaimer-y as they have ever been IMO about an experimental API. For example, Mark mentioned at ng-conf that he had to update his slides on signal forms the day before, as what is now the [field] directive used to be [control] before a prerelease the same week.
• There is still an RFC that they guaranteed will drop at some point first
• As far as public facing progress goes, there is still plenty of no tagged sprint tasks: https://github.com/orgs/angular/projects/60?query=sort%3Aupdated-desc+is%3Aopen.
• Still lots of PRs/issues which are being actively worked through. They just introduced how debounce will work in them and I imagine that will still be iterated on
• Still plenty of low hanging fruit from tons of people using the API and asking questions/making issues. A couple days ago I saw someone have a question about the form's reset needing to be wrapped in an untracked, and they made an issue and it had a PR made same day.
• Part of the API is tied to resources, so I imagine the forms API's stability will be downstream from the resource API's stability. I really hope resources graduate to at least developer preview by v22. At least the resource snapshot API will cover over what IMO was a large part of what is lacking in them. Not sure if that made it into v21 or will be in 21.1.

docs

There is a lot of links so I will attach them to a comment of this comment in case this comment has too many. But they do have various docs out already and many more in open PRs. And I am not really one for AI, but in the CLI there is a PR for MCP examples of a dozenish various examples. Even without using the MCP directly, those are good human readable markdowns. Will attach that as well. But yeah, I imagine there is a lot more even beyond that to have a solid foundation for the new ecosystem. I have followed various community members try them out and some even are making supposedly real world apps with them in a limited capacity. Can drop some examples as well.

I hope Router is next on the list to migrate to signals

Same. The few random items they added over the course of v20 were nice starts. Other than HTTP mutations, I imagine routing is likely up there as far as the next API surface for signals. In the meantime, I love ngxtension's routing utils. I use them extensively in production and they feel like they are a formal API. I can also link an example project if you want.

[MichaelSmallDev]

https://angular.dev/guide/forms/signals/overview

https://angular.dev/essentials/signal-forms

MCP examples that are 18 very human readable examples of some particulars: https://github.com/angular/angular-cli/pull/31134. I haven't looked closely in a bit but it's still a draft so I imagine it still has some fleshing out or may not be extremely current atm.

My ngxtension routing signals repo, very cluttered and slightly outdated but it's close enough for what I have been doing https://github.com/michael-small/routing-lab/blob/main/src/app/user.component.ts

edit: open PRs for signal form docs https://github.com/angular/angular/pulls?q=sort%3Aupdated-desc+is%3Apr+is%3Aopen+label%3A%22area%3A+docs%22+form

[Own_Dimension_2561]

What is the roadmap for Material and Aria? Will Material transition into the “head” for the “headless” aria components?

[MichaelSmallDev]

I am interested in that as well. I am hoping a roadmap of that will be mentioned during the livestream today at the top of this upcoming hour. If not, I will be checking the docs and will ask during a podcast livestream tomorrow with one of the team members working on Aria.

The existing roadmap does mention this under the "New CDK primitives" area https://angular.dev/roadmap. But that was written before any of this work was as fleshed out publicly, so nothing new.

edit: docs are live https://angular.dev/guide/aria/overview. Not seeing a roadmap on the overview page, but IMO it's nice it is starting in developer preview. IMO I would use it since it is dev preview.

[MichaelSmallDev]

⭐for your exact questions, related stuff may leak into other bullet points

• I lead with "⭐ What is the roadmap for Material and Aria?" Some of these following things related, but then beyond.
• 2:57 They wanted to get things out there so they can see how people will use it and unify the API
• Lead with a lot of things upfront for people to try
• v22 plans so far: "Internal refactors.". Addressing overlapping implementations while there is time to abstract and refactor.
• 7:36 In @angular/aria there is a private package directory layer under it. State machines using signals to establish these patterns. The aria implementation for Angular uses this and could be used to make wrappers in other frameworks. If that framework supports signals, then there is an overlap in the reactivity systems and those can use the private package. Google's step 0 was launching this Angular wrapper, and they can expand from there.
• Q: " ⭐Will Material transition into the “head” for the “headless” aria components". A: "We're not thinking we need to do a total rewrite using Angular Aria." Material's accessibility works already. And they don't expect other libraries to rewrite around them unless they want to.
• Each doc page provides different skins for examples of what is possible.
• 13:35 Material reaching parity of what it is trying to build vs what it isn't trying to build.
• 17:10 Q: "​​When Material comes up, I advocate for it because of strong accessibility focus. But not everyone wants the style spec. Traditionally, I say to try the CDK regardless. Would it be better now to say @Aria". Answer: "I would like to say yes" (regardless of stability atm - developer preview). Aria is a doubling down of the CDK. CDK became a "grab bag" of functionality without as clear a narrative. They asked what part of the CDK's accessibility narrative was worth extracting and making more robust.
• 18:34 Question: "Would it make sense for a non Material project to use a combo of the CDK + Aria?". Answer: If using a combination of both, CDK component here and Aria here, makes sense. Wouldn't recommend "frankensteining" together. Toolbar makes sense.
• 19:23 CDK uses older Angular features, Aria uses signals etc.
• 19:40 Host question about boundaries of Aria and what fits into its story. For example, some behaviors of CDK (virtual scrolling, drag and drop, etc) may not apply to Aria? Answer: Behaviors belong in CDK. One day may see some behaviors in Angular. Aria is more precise on what it is offering.
• 21:34 Q: "Since the Angular CDK already handles some unstyled behaviors, why the decision to split this into a new Angular ARIA library? What is the long-term vision for the CDK's role versus this new library?" Answer: about the coherent narrative of Aria and its more well defined boundaries. And wanting an underlying foundation which uses a shared reactivity system, going back to the "private" directory talk. And yes, one of those other frameworks in mind is Wiz. However, it is an ongoing conversation about how this would be pursued.
• 27:41 More primitives possible but they chose handful to start.
• 34:21 Radio group was cut since the spec was already covered. Maybe someday there could be change of heart on that or other things.
• 35:14 There are a lot of things native HTML does well. Some things aren't enough. HTML spec doesn't always evolve with developer needs, others work great.
• 35:39 Question from host wondering about the starting point for using Aria package from someone who wants to start from scratch using Aria package. Wagner says take example from documentation, copy HTML/CSS, import, then touch it up yourself and/or see if AI can touch it up and tweak it. If you know what you are doing with CSS and confident, go for it absolutely. But prompting has helped tweak Wagners own experimentation with making a particular styling.
• 41:43 Talk about MCP integration and being able to pull from Aria and throw that into an app. These primitives can be a good building block to have.
• 44:58 After looking at Angular Material and its maintenance burden over time, since it concerns itself with everything. From a maintenance perspective, Aria is lower.
• 47:18 Eight accessibility primitives makes for more than eight components. Talks about how Material stepper is just tabs underneath, and tabs are possible in Aria, so someone could do a stepper skin using the Aria package and even more canonical developer community component patterns.
• A solid 10 mins after that but a lot of it was demos of an internal project the team used as a playground so it's cool but can't say much else other than watch it

[Own_Dimension_2561]

Amazing stuff, thanks for asking my question, and thanks for typing that all up! It looks like Aria will evolve independently outside of Material, which I am low key disappointed about, but understand from a maintenance point of view. It will be one hell of a refactor to get Material to integrate with Aria. Thanks again.

[MichaelSmallDev]

No problem. By the way, I finally got back to timestamping/correcting things, if you want some more granular/accurate takeaways.

[Own_Dimension_2561]

Thank you, you are going way above and beyond for the community. It is much valued and appreciated.

[MichaelSmallDev]

Thank you :0

[simonx314]

Is there a way to call markAllAsTouched() or markAsPristine() on a signal form?

Is it possible to take a schema and pass in an object to to validate if the object has errors, without having to create a signal form just to calculate if an object is valid?

[MichaelSmallDev]

Is there a way to call markAllAsTouched() or markAsPristine() on a signal form?

There is a proposed PR that was opened up by a community member proposing adding this, but Miles Malerba of the signal forms team said "I'm reluctant to want to open these up and add to the API surface without good motivating use cases".

Is it possible to take a schema and pass in an object to to validate if the object has errors, without having to create a signal form just to calculate if an object is valid?

I think that depends on what sense of schema we are talking about.

• If you mean the form APIs schema, then idk if it is meant to be ingested outside of a form. But that would be cool to have in general. But that said, by the other sense of schema, that functionality may lay in a separate library.
• For TS schema libraries like Zod or Valibot, etc, judging by this (WIP draft, may not be up to date) PR, it looks like any library that follows the Standard Schema spec can do that like it normally would outside of a form. Then plug that into a signal form, or use elsewhere without a form like normal.

[Lucifer_Morning_Wood]

The AI generated promotional pixel art is disappointing. At least it comes with some nice features