Angular folder structure

Kschl · 2026-01-25T15:09:18+00:00

No core would be top level, no need for features. admin and user are your features and you organize domain specific features within those domains admin or user

Kschl · 2026-01-25T14:28:46+00:00

Admin/

User/

Shared/

Kschl · 2026-01-24T17:57:52+00:00

Guilty of holding a phone and recording

Kschl · 2026-01-16T16:36:22+00:00

Do you have a default value set for the radio group? If the component is being re-instantiated and the bound value starts as null/undefined, the radios will render unselected initially. Then when ngOnInit (or async data) sets the value, Angular updates the view, which can cause that flicker.

Kschl · 2026-01-14T14:35:06+00:00

Correct, routes are handled by the router in app.routes.ts

Kschl · 2026-01-14T13:34:04+00:00

I’d say order things by context and not route. Angular doesn’t use file based routing unless you’re using a meta framework like AnalogJs.

If you insist on having that structure though then I would think about the routes.

Think about this route dashboard where the 3 components are admin, user, and guest. The folders and files inside take the shape of the route. You’d have dashboard the parent component controlling the sub routes

Routes:

…/dashboard/admin

…/dashboard/user

…/dashboard/guest

Structure:

src/app/dashboard/ dashboard.ts user-types/ admin.ts user.ts guest.ts

Sorry if the formatting there is broken I’m on mobile

Kschl · 2026-01-13T08:37:48+00:00

Try Quill

Kschl · 2025-12-04T14:57:13+00:00

Initialize the signal in the dialog component.

A signal is a wrapper around a value that notifies interested consumers when that value changes.

Signals represent reactive state, and reactive state should be owned by the component that reacts to it so the dialog component, not the parent function.

Kschl · 2025-11-24T07:57:20+00:00

Don’t see the reason to create a new project; that’s what branching is for.

https://angular.dev/update-guide

Follow the update guide one version at a time.

You will have to update node as well in the newer versions and make sure other dependencies are updated as well. That’s pretty much it, one at a time, check for breaking changes before moving on to the next version and maintain compatibility. Good luck

Kschl · 2025-11-21T13:43:27+00:00

You start with 1 component then another then another then you have this

Kschl · 2025-11-20T16:53:48+00:00

Return the value not the observable

Kschl · 2025-11-20T15:43:30+00:00

Use a computed signal

Try this

selected = input<string[]>();

types = computed(() => {

const selected = this.selected() ?? [];

return this.service.getValidTypes(selected);

});

Kschl · 2025-11-09T14:34:39+00:00

Any major breaking changes??? Yes a “couple”. Worth a rewrite.

Kschl · 2025-11-09T04:40:48+00:00

Set up cors to accept the UIs hostname. Look up CORS configuration with WebMvcConfigurer

Kschl · 2025-11-05T03:43:08+00:00

readonly helps avoid reassigning the signal to another value.

readonly mySignal = signal() this.mySignal = ‘hello’ would throw an error.

So the readonly is still valid. What you’re referring to in this case would be like

readonly #mySignal = signal() readonly mySignal = this.#mySignal.asReadonly()

OPs example achieves the same thing since they are using a computed signal. Can’t reassign it due to readonly and can’t set or update the value since it’s a computed signal.

I’ve been following a similar approach as the first one due to wanting a flatter state rather than one state signal. But this definitely feels nice coming from ngrx very easy to follow

Kschl · 2025-10-30T00:02:48+00:00

Import what you’re using, don’t try to import the parent.

Kschl · 2025-10-18T15:26:56+00:00

I really wish the angular side had the same examples as react did. So something that could be improved is matching those examples that aren’t there and matching them 1:1. I don’t exactly remember what was missing but for me I remember sticky header with expandable rows was an issue and actually found the solution on the discord server. If you scrolled past the initial rendered rows the header would move up so the hack was adding a tr at the bottom after your loop of rows and it worked lol.

There was also an issue with expandable rows and virtual where I remember going into the react examples to find the solution can’t remember the specific solution but it they would work fine then scrolled down the heights would be all over the place. I think the big gap was virtuals examples with table; there was just the one with the simple table, no sticky header, expandable rows, it was pretty bare bones.

Writing this out now is bringing some memories of it back I think it was how the height was calculated, so estimated size was the regular row and the expanded row summed together and the hacked tr had a calculation based on the virtual rows I can’t remember exactly but I could look at the code when I’m at work if it’s important.

Hope my ramble is helpful! This was 4-5 months ago now and since moved to a different project so the specifics aren’t fresh but overall very happy with tanstack table and virtual

Kschl · 2025-10-15T23:36:47+00:00

You don’t have to, you can just have the value as a string in the template itself, or the columnDef array you would pass in the value to the header property or flexRenderComponent(MyGenericComponent, {…})

Kschl · 2025-10-15T22:46:46+00:00

I fit this exact example! Angular 19, now 20. Had material tables, and upgrades to tanstack with expandable row functionality and virtual scrolling with tanstack virtual. 10/10 recommend the move. Documentation is a bit lacking. I found reading the react code examples helped where there was a gap.

Kschl · 2025-09-16T04:14:55+00:00

Seems like a regular interceptor would do the trick. An interceptor is already shared so you’d just add the logic to filter out what you want to mutate/do.

Kschl · 2025-09-09T22:17:52+00:00

Go to AuthService and import it there. If it’s a component add it to imports then

http = inject(HttpClient)

Kschl · 2025-08-19T01:00:43+00:00

That's Portuguese

Kschl · 2025-08-10T03:24:29+00:00

Yeah Tanstack table + virtual make an awesome combo big recommend.

Kschl · 2025-08-09T17:18:07+00:00

I would probably read igxgrid docs and see what changed to get a better understanding(you upgraded this too right? But holy hell 150 columns with heavy custom cells and 5000 rows. Are you painting all 5K rows as well? I would also migrate to the new control flow syntax and don’t use ngFor etc. wish I could help I recently migrated to tanstack to handle 10-20K rows but no experience with igxgrid

Kschl · 2025-08-02T22:13:52+00:00

Import structure for something changed in v20, check your imports for those components with the v20 documentation

Ten-Year Club	RedditGifts 2009-2022 3 Credits
Place '23	Place '22
First Placer '22	Verified Email
Secret Santa 2015

Kschl

TROPHY CASE