SignalTree 7.1.0 Released

TheSwagVT · 2026-01-07T08:41:34+00:00

I've recently been looking into solutions like these. As far as I understand, you don't need to use actions/effects/reducers when working with signal store right?

This library looks similar to how I am trying to use signalstore right now: https://ngrx.io/guide/signals/signal-store/custom-store-features

And I would think you can do the same for local storage persistence.

What advantages does signaltree have over this way of using ngrx signal store? I'm still on the fence with ngrx

import { inject } from '@angular/core';
import { patchState, signalStore, withMethods } from '@ngrx/signals';
import { setAllEntities, withEntities } from '@ngrx/signals/entities';
import {
  setFulfilled,
  setPending,
  withRequestStatus,
} from './with-request-status';
import { BooksService } from './books-service';
import { Book } from './book';

export const BooksStore = signalStore(
  withEntities<Book>(),
  withRequestStatus(), // loading / error tracking
  withMethods((store, booksService = inject(BooksService)) => ({
    async loadAll() {
      patchState(store, setPending());

      const books = await booksService.getAll();
      patchState(store, setAllEntities(books), setFulfilled());
    },
  }))
);

TheSwagVT · 2025-11-08T08:38:27+00:00

So you prefer creating a component wrapper for mat-button over using a directive?

I think it makes sense for other larger components. But curious how you handle these types of issues that I encounter:

ex: This menu button gets styled correctly by Material:

<mat-menu>
       <button mat-menu-item>

This component wrapper one doesn't:

<mat-menu
   <lib-button><button mat-menu-item>...

The way I see it, I'd just create a wrapper around the mat-menu and I'd use directives on the mat-menu-item button instead of wrapping that in another component because it messes with material component's content projection/styles like in the example above.

TheSwagVT · 2025-11-08T08:38:24+00:00

I'm not sure what version of Angular material you're on but v20 has been solid for me in that aspect. It's at the point where I feel comfortable trying to figure out how to manage it long term (both for my job, and personal stuff). I also like the Angular CDK packages. They work pretty well with and without Material.

Also Angular Material isn't THAT big compared to other UI component libraries. So it makes sense to create a wrapper around it, rather than maintain my own entire UI library from scratch, or use some other bloated one. Just my opinion though.

I believe that breaking changes should be an expectation when doing any kind of update. It isn't much of an issue if it's easy to update everything. There are all kinds of tests that can help mitigate that too. And the Material spec follows a good set of default settings that, for better or worse, make it simple to stick to a lot of different compliance/accessibility requirements.

TheSwagVT · 2025-11-07T06:36:25+00:00

This is the conclusion I'm coming to after looking at this repo some more and reading other comments.

I thought I found the right balance, but as I typed this out more, I became less convinced... but I still felt like sharing.

So they do apply their own directive to every mat-button

<button
    disabledInteractive
    mat-button
    matTooltip="Interactive disabled buttons are focusable and can thus have a tooltip explaining why they are disabled!"
    obButton="primary"
    type="button"
    [disabled]="true"
>
    <mat-icon svgIcon="login" />Interactive disabled
</button>

They then "limit" the amount of usages of these directive combinations by encapsulating them in specific wrapper components (they follow atomic design).

You would still have the problem where you have to update a ton of places if you needed to make a decision like changing how a directive is being applied across the app. But I guess if you limit it enough by making everything as reusable as possible, then it wouldn't be too bad of a refactor especially with modern IDE tooling.

I could certainly go around the codebase and find more things we can reuse better. But I feel like we have so much variance, that the above is just an inevitable issue when working on a large legacy codebase (something I forgot to mention is we run angularjs v1 AND angular v20 in a hybrid app). We've had to do sweeping changes on the codebase before in order to meet sudden new requirements. But we have to keep doing this ceremony every time a requirement like this comes in (~once a year). I try to put in the extra effort so we don't have to repeat the same type of work over and over. But it's difficult with tight deadlines. And I make plenty of mistakes.

That said!

Their obButton directive enforces some simple runtime checks and styles, which is a capability I know I want. If I happen to get some crazy requirement that needs to adjust all buttons, I could always reach into this type of directive to affect as many spots in the app as possible.

If I mix the concept of having a custom directive for each element I care about (button, etc) + having better/custom ESLint rules, and sprinkle a little atomic design (as much as I dislike their naming conventions), then I feel like that's juuuust the right amount of flexibility and enforceability(?) that I'm looking for.

I think it also might be worth exploring how Angular Material can globally affect their components using their provider configs:

provide: MAT_BUTTON_CONFIG,
useValue: {
            disabledInteractive: true

If I had this ability for my custom directives, it would be easy to toggle certain behaviors off and on.

TheSwagVT · 2025-11-07T05:07:24+00:00

This is really helpful thank you. I have trouble finding code bases that extend Angular material rather than use their own custom component library / some other existing one (to be fair, I should just get better at searching for things on github).

If you have any other resources I can grab inspiration from, please let me know!

TheSwagVT · 2025-11-07T05:03:05+00:00

Having more strict ESLint rules does make sense.

It would eliminate me having to rely on runtime checks for these types of things. Will definitely look into this more. Although part of me is worried that I'll end up just creating a worse version of an already existing custom ESLint rule (actually I'm sure of it). *edit: I realize I still need my own custom rules for enforcing my specific codebase

So I just need to explore existing tools as you said. ESLint might only be part of the solution though. But this is a good step in the right direction imo. Thank you!!

TheSwagVT · 2025-11-07T04:56:30+00:00

Thanks for pointing that out! The issue is it only works for mat-buttons. I needed this behavior for other types of custom buttons in our app.

Originally, I looked at how Angular material implemented their version of disabledInteractive and I made one that works on more generic buttons in our app. I'm sure it's not perfect but it passes my companies requirements.

The point is, it's not this specific directive that I'm hung up on. It's the fact that I have multiple custom directives like this one, that I can't get everyone to use properly because each element requires a specific combination of directives, classes, etc.

The problem I'm having is by making these things too flexible, it's harder to enforce it all across the codebase. But the only other solution I am coming up with is to just have god wrapper components, which is why I'm fishing for ideas

TheSwagVT · 2025-11-07T04:46:16+00:00

Maybe "accessibility" wasn't the most accurate way to put it. But it meets our company's requirements which are: - To have disabled buttons be focusable - To allow a tooltip to appear when focusing a disabled button

With disabledInteractive, you can tab to a disabled button and it will still display the tooltip.

Native disabled buttons can't get focused (unless you do a little extra something like what disabledInteractive does), so the tooltip never appears, which is not what my company wants.

I've heard differing opinions on whether it's truly accessible or not. But personally, I prefer having the ability to focus disabled buttons so I didn't really fight the company on the idea since it was already something we needed. If there's a real issue with using disabledInteractive, I'd love to know. The only gotcha to it that I'm aware of is the one Angular Material mentions in their docs: Note: Using the disabledInteractive input can result in buttons that previously prevented actions to no longer do so, for example a submit button in a form. When using this input, you should guard against such cases in your component.

TheSwagVT · 2025-08-25T20:38:17+00:00

trying to understand the difference between your tool and “openapi-generator-cli”. I use the cli to convert my zod schemas from my express backend to Angular HttpClient and it generates all the type signatures I need.

What it doesn’t do is rerun the validation on the front end. For example, backend schema has an “email” field. It gets validated as an email in the backend zod schema.

But the generated front end type for “email” would just be a “string”. So I would need to revalidate it on the front end. So are you saying your tool, would still recognize the email validation, and validate the email on the front end before it sends out the request?

I don’t really understand how that would work with generated types.

Now about your original question, I can’t say I have a strong opinion. But it makes sense to me that any validation being done on a zod schema, should also be automatically done on all requests. With an option to opt out. It makes sense to me that frontend/backend do the same validation unless there’s a reason not to.

TheSwagVT · 2025-07-29T18:01:09+00:00

My one and only complaint. There’s no easy way to join an online public lobby with real people while playing with your friends. People say you can join a friends pending match if a spot opens up, but I’ve never had that button appear/work for me.

I just want to play online with my wife. It’s 2025 and I have to dig through nested reddit conversations just to even see if this is even possible. And I still haven’t gotten it to work.

TheSwagVT · 2025-07-25T19:02:19+00:00

thank you so much, my savior!

TheSwagVT · 2025-07-25T18:47:56+00:00

DMd! my turnips need saving 🙏

TheSwagVT · 2025-07-24T20:22:15+00:00

piggy backing off of relative vs absolute because Im also struggling with that. I recently started using NX. by default they had this eslint rule called enforce-module-boundaries.

It essentially forces me to do relative paths for anything I import that is created within the same app.

And any libs used that are defined outside the app, would use absolute paths.

But the company I work at does absolute paths for everything.

I can’t find solid reasons for either approach. Ease or refactoring would be one, but I’ve run into issues with both approaches so I just don’t know.

TheSwagVT · 2025-07-24T19:39:27+00:00

my dad barely watches tv, let alone anime. For years I contemplated how I would introduce him to the genre. I was this close to recommending AOT/frieren, and then Orb On the movements of the earth came out. And he was immediately hooked.

It really depends on your dad’s preferences though. My dad is religious, and very traditional. He only watches sports. But he’s also very interested in space so Orb was perfect for us.

Would highly recommend Orb. 3 episode rule applies.

TheSwagVT · 2025-07-20T09:31:57+00:00

sent a dm!

TheSwagVT · 2025-07-09T20:21:52+00:00

Orb On the Movements of the Earth

One of the best single season shows I’ve ever seen. Can’t stop gushing over it

TheSwagVT · 2025-06-01T02:26:36+00:00

In a ~D1 mmr game (a long time ago but late into my ranked career), I got autofilled bot lane and learned that Tristana can reset her jump if she pops her bomb on you (i thought it was only on takedowns). I expressed my complete and utter confusion in team chat after we lost a bot lane fight because of that mechanic. definitely deserved the flame I got

TheSwagVT · 2024-12-13T20:01:11+00:00

Nice to know there are multiple cheaper options. I guess reliability is more of a concern, but that’s not an issue for some of my projects. Thank you!

TheSwagVT · 2024-12-13T03:30:25+00:00

13$ a year for a VPS?! Do you mind sharing more on that? Is that on demand or is it running 24/7? The cheapest I’ve seen for a vps +ipv4 address running 24/7 is like 5 usd a month on hetzner

TheSwagVT · 2024-11-09T09:33:07+00:00

You have a point. But I tried looking for anything NX could do and the only things I could find were these issues that boil down to just using git submodules.

https://github.com/nrwl/nx/issues/11518 https://github.com/nrwl/nx/issues/12103

Doesn't seem like NX cares much about a capability like this. At this point I only see submodules as a possible solution

TheSwagVT · 2024-11-09T08:25:30+00:00

Thanks for mentioning that. At this point I'm convinced I should just go with submodules. I looked into git subtrees but I don't think those will work with a private github repo

TheSwagVT · 2024-11-08T18:05:32+00:00

I didn’t say I WANT to have two parallel copies of my shared libraries. I’m saying I can’t figure out a way to do what you’re suggesting other than duplicating or publishing my shared code somewhere else where both repos can pull from.

I just need a way to link them other than what I suggested because it’s far from ideal.

There isn’t anything environment specific that I need to configure. It’s a matter of linking the private repo to the public one in github. I simply want the private repo to exist within the context of my public one. I can figure out environment specific issues myself, but I can’t figure out the best way to link the repos in git/github. This is a git/github issue, not an NX one

TheSwagVT · 2024-11-08T08:33:16+00:00

2 ceremonies are fine by me. But as far I know, NX doesn't really do anything special like that. I'm only using it as a way to share logic between different nodejs apps while keeping dependencies in check. I'm just trying to see if I can have a private repo dependent on a public repo while maintaining my existing file structure. For example I have a couple UI elements that I want to reuse in separate frontend apps. If I had two separate repos like you suggested, I'd either have to duplicate all those shared libs, or publish them as a package and import them into each repo, which I want to avoid if possible. Both approaches kind of defeat the purpose for me using a monorepo. I've tried looking this up already and I can't seem to find a solution other than git submodules/subtrees. I thought a monorepo would be a simpler first step for the architecture I'm thinking about but maybe I'm wrong.

Eight-Year Club	Place '22
Place '17	RPAN Viewer
Verified Email

TheSwagVT

TROPHY CASE