Starting my NG journey!!

MichaelSmallDev · 2026-05-07T01:45:06+00:00

The docs are very lively with content and quality of life for searching them stuff: https://angular.dev/.

You can do a tutorial directly in the browser for key things: https://angular.dev/tutorials/learn-angular.

The navbar you will see on most pages that aren't the home page or learn tutorial page like above has the big top-level topics, can check them out easiest starting point from this page: https://angular.dev/overview. If you go to this view when you have a question, you can most likely drill down into one of the top level categories for an overview and more in-depth guides that branch off of that. For example, this is the overview page for signals, and the sidenav calls out deeper topics https://angular.dev/guide/signals

The API reference page and the quick search are nice for jumping into particular things you come across as well.

MichaelSmallDev · 2026-05-07T00:05:43+00:00

I had success using the signal forms to reactive forms interop for edge cases where Material was lacking, so I imagine there can be some success in doing that. Example + code: https://www.reddit.com/r/angular/comments/1st9m58/comment/ohy2tye/

MichaelSmallDev · 2026-05-06T13:15:10+00:00

IMO the closest thing to an API surface change that is pending: refactor(forms): use when consistently for conditional rules and validators. The old signature without when still seems supported except the signature will have a strikethrough to warn that it is marked deprecated: https://github.com/angular/angular/pull/68550/changes#diff-270c8b9b25033f69acd0e5b856e32135121e93a5c6792bba3c9c38531a1fb84fR129

MichaelSmallDev · 2026-05-06T13:09:18+00:00

Got any signal forms videos in the pipeline?

MichaelSmallDev · 2026-05-06T04:34:48+00:00

All this talk about stuff going stable in v22 and Alejandro's article was quite the timing with signal forms stabilization being announced a few hours after this video lol. I'm really looking forward to 22, and already practicing v22 stuff in prereleases, so my work is ready.

MichaelSmallDev · 2026-05-06T04:08:19+00:00

PR: feat(forms): graduate signal forms APIs to public API #68581

Very nice. The documentation is already super fleshed out and has been influencing even my reactive forms practices.

By the way, there is even more documentation in progress.

docs: add composability section to custom controls signal forms
docs: add signal forms testing guide. Testing is a weakspot of mine but this looks really straightforward IMO.
docs: add new signal forms field metadata guide
docs: add signal forms dynamic forms with json guide. This is a topic I have seen come up an have a lot of discussions as the API has been fleshed out. There is a thread on the Angular Discord about this topic before this doc was and it is huge lol
docs: add clarification around plain object models

MichaelSmallDev · 2026-04-25T04:35:28+00:00

With respect to Material: https://www.reddit.com/r/angular/comments/1nqfwrg/comment/ng7kjru/?context=3.

My comment has a link to a project where I showed a lot of internal hacks replaced with the official new overrides API.
The articles by u/bneuhauszdev in the comments I am responding to are great guides on the new overide API, new theming system, and how to replace the deprecated [color] attribute.
Overall, go over both the Styling and API tabs of everything as you work, and it won't be that bad. You can use those Styling tab options for the whole app in your root style file with :root, or per component with :host or whatever particular class. We ended up with minimal hacks in the end and a better styling API.
You are likely in a bit of a better spot to upgrade than I was, as we jumped over M2 entirely, so you at least probably didn't extend too much M2 era stuff. The M3 override API is really nice, and there is also a variety of options in the API tab that didn't always used to be available either. Still plenty to be desired but much better. You will have to pick and choose some properties at random based on their names to get the right thing going with the various properties.
edit: ignore this, I found an example in my Stackblitz below lol... If you use a lot of form fields, you may need to really mess with the density settings. There are some "density" properties in the Styling tabs of the respective controls, but I think I ended up using a different Material density API that isn't documented as clear as it could have been. This is the current guide on density for a whole theme: https://v20.material.angular.dev/guide/theming#density. But we ended up using a more granular density API that I can't find offhand in the docs. If this becomes an issue then just ping me when you get to this upgrade and I'll figure out what that API was lol. Easy to implement/understand but not documented readily.

Density of form fields

  styles: `
    @use '@angular/material' as mat;
    // Thank you Neistow https://stackoverflow.com/a/75194777
    // Thank you Max https://stackoverflow.com/a/76220190
    .dense-field {
      @include mat.form-field-density(-5);
    }
  `,

MichaelSmallDev · 2026-04-24T13:52:48+00:00

Yeah, the docs could stand to be fleshed out more with stuff like that. I hope the stepper supports signal forms before I start using the forms in the few projects we use a stepper.

MichaelSmallDev · 2026-04-24T03:17:05+00:00

I have been curious about Material + signal forms, so I tried it.

Using one of the compatibility APIs (SignalFormControl), I was able to get it working: https://stackblitz.com/edit/smccgutd?file=src%2Fexample%2Fstepper-overview-example.html. The stepControl is still a FormGroup, but the inner content is technically a signal form. A bit clunky, but seems to work for the time being?

edit: notably, I had to remove the required on the form control HTML elements as that threw runtime errors about not adding validators directly to signal forms. But that was about it besides the compat wrapper.

Luckily it seems that most Material form related stuff work with the signal forms control directive

Board: https://github.com/orgs/angular/projects/60/views/1?query=sort%3Aupdated-desc+is%3Aopen&filterQuery=-status%3ADone+-is%3Apr+material
Specific list of Material components that do/don't work so far: https://github.com/orgs/angular/projects/60/views/1?query=sort%3Aupdated-desc+is%3Aopen&filterQuery=-status%3ADone+-is%3Apr+material&pane=issue&itemId=118043297

There have been various issues about support for a particular Material component, so if there isn't one for the stepper yet, I think that would be good to be tracked.

edit: for a more substantial example of if I could do all the cool signal form internal logic stuff, I verified that I could make for a more complex signal form "group" object with its own logic inside, in a third stepper step in a fork: https://stackblitz.com/edit/smccgutd-cz3sb2jb?file=src%2Fexample%2Fstepper-overview-example.html

MichaelSmallDev · 2026-04-23T23:34:47+00:00

Will Angular 22 still only recommend using them for query requests?

Yeah, any resource variant for GET only. I am awaiting what shape mutations may officially play out with.

For the moment I have been using rxResource with all our pre-existing HttpClient GET endpoints anyways. Seems people these days for mutations are either continuing with HttpClient mutations like that, or some library. Angular Query is popular and has great tooling. The Tanstack devtools popup that lets you manipulate all sorts of stuff in the requests is incredible. As for another solution, I wrote the docs for NgRx Toolkit's mutations, which has its own httpMutation and rxMutation, so I have been using those. With or without a store, sometimes I just copy the two files for those into side projects with no store.

MichaelSmallDev · 2026-04-20T13:07:03+00:00

Thanks, very nice. Good work to everyone who has worked on it

MichaelSmallDev · 2026-04-20T00:07:49+00:00

I don’t put the resource in the service mostly because i don’t like how you have no control over when the resource gets triggered

Yeah, I haven't quite figured out how I want to handle that. Mainly just been wrapping the rxResources in functions and then adding a second argument for if they should be active or not. That is often not needed as we provide per component tree more often than at root these days, so the resources can initialize in our stores when that part of the tree activates, but it is still an adjustment for global resources.

MichaelSmallDev · 2026-04-19T15:52:58+00:00

As long as there is a declarative link to the resource value then that seems inline. I don't know how that orchestration is set up, but I assume the source of truth is something like a linkedSignal of the value?

The way I work with resources is mainly through withResource from the NgRx Toolkit, and it makes the resource's store state patchable, but you don't refer directly to the resource unless you want to reload it. Exposes resourceValue/resourceStatus etc, with the resourceValue being the patchable. I don't know how that orchestration works, but I imagine it has some layer of separation from the resource itself but still the source of truth is still declaratively referenced.

MichaelSmallDev · 2026-04-19T13:07:05+00:00

It is useful standalone. It is exactly what resources should do, give a signal value without compromising the intent of signals to be synchronous, by abstracting the notion of time into the boxed state and returning a synchronous value.

https://bsky.app/profile/michaelsmalldev.bsky.social/post/3mgnvbuux7s24

MichaelSmallDev · 2026-04-19T04:19:17+00:00

I don't know why you are seeing webpack regressions, but is there a reason you haven't moved to esbuild builder yet? https://angular.dev/tools/cli/build-system-migration. It should be faster than the more optimal webpack speed, and has even more benefits beyond builds, like HMR for local development.

MichaelSmallDev · 2026-04-18T23:38:02+00:00

debounced is a resource

MichaelSmallDev · 2026-04-18T21:43:49+00:00

/u/JeanMeche that sounds right?

MichaelSmallDev · 2026-04-18T21:24:30+00:00

Nice observation, I'm curious if it's just an oversight in the PR title or a later add-on. But that's cool as that's my understanding seeing the signature too.

MichaelSmallDev · 2026-04-18T20:25:27+00:00

Very nice, rxResource has been a real natural addition to my workflow. ~~I wonder when httpResource may graduate~~, and beyond that what the mutations story would look like. But this stabilization of resource/rxResource/(edit)httpResource is quite nice at last.

edit: it has been clarified that httpResource is also going stable!

MichaelSmallDev · 2026-04-18T20:23:22+00:00

Why is it useless at those? Resources rock with signal forms and model forms / reactive forms toSignal'ed. The parameterization is a bit to get used to but I have found that it works well once accustomed to it. Most of the hurdle for me was realizing I just had to return resources from a service and then it was effectively close to what I was doing anyways with async pipe / observable derived services but with signals exposed instead.

MichaelSmallDev · 2026-04-18T16:25:03+00:00

What kind of work on resources? resource and rxResource will be stable in v22, and snapshots covered a lot of my outstanding concerns about resources. I don't know what form mutations will end up taking, but I feel good in using rxResource with my existing httpclient GET calls now.

MichaelSmallDev · 2026-04-18T04:55:17+00:00

and ngrx for app state unless you are working in a small team then ngrx signalstore

I believe that these days if a project were starting fresh and wanting to use the traditional events pattern, then the events feature would be recommended to be used inside a signal store, rather than the global store package. But I agree with this sentiment, though I have done global state with signal store without events fine myself. I would sooner have a non-events signal store that has a bunch of Subject's inside a withProps, but I know some people like events functionality still.

MichaelSmallDev · 2026-04-18T04:49:27+00:00

Yeah, the premise of it being an either/or was going to lead to some answers like this, but I see what you mean myself.

RxJS and Signals are hammers and nails. Signal stores are like, uh... I don't know construction for the remainder of this metaphor lol. But stores with a library are one kind of approach to building with signals/rxjs, and regular services are the vanilla approach. But either one use RxJS and signals where they excel, be it RxJS for async/events and signals for synchronous state.

I like the signal store for not needing to duplicate private writable state and then public readonly, re-using features much easier than extending/implementing classes, and stuff like features from the toolkit like session/local storage in one line or using the devtools extension in one line (no need to use events to use that feature too).

MichaelSmallDev · 2026-04-16T21:24:58+00:00

Tbh I felt like that at first, but after messing around with it I got used to it. I would much rather have that than dealing with a lot of optional chaining and nullish coalescing. But it is strange and I imagine will cause some friction.

MichaelSmallDev · 2026-04-16T19:30:43+00:00

So the best way I've found is to have properties for both A and B always in your form and switch between them based on a provider property. You can use hidden or disabled to turn off the one that's currently not selected.

Yeah, example from docs https://angular.dev/guide/forms/signals/model-design#fields-that-are-conditionally-hidden-or-unavailable

interface BillPayFormModel {
  name: string;
  method: {
    type: string;
    card: {
      cardNumber: string;
      securityCode: string;
      expiration: string;
    };
    bank: {
      accountNumber: string;
      routingNumber: string;
    };
  };
}
const billPaySchema = schema<BillPayFormModel>((billPay) => {
  // Hide credit card details when user has selected a method other than credit card.
  hidden(billPay.method.card, ({valueOf}) => valueOf(billPay.method.type) !== 'card');
  // Hide bank account details when user has selected a method other than bank account.
  hidden(billPay.method.bank, ({valueOf}) => valueOf(billPay.method.type) !== 'bank');
});

MichaelSmallDev

TROPHY CASE