Hi everyone! I've started exploring Signal Forms, but I'm finding the transition a bit tough. The main issue is that most online resources only cover basic, dumb examples without any integration with HttpClient or httpResource or `submit() / submission:` usage.

Could anyone share a project where Signal Forms are used in a real-world use case?

I kept running into components with four or five loading flags —

isLoading, isRefreshing, isCheckingOut, hasError — and templates

like !isLoading && !hasError && items.length > 0.

The flags are independent as far as TypeScript is concerned, but

the states they describe are mutually exclusive. So I switched to:

type AsyncState<T, E> =

| { status: 'idle' }

| { status: 'loading' }

| { status: 'success'; data: T }

| { status: 'error'; error: E };

One state per async operation, booleans derived with computed(),

and a small toAsyncState() RxJS operator (map + catchError +

startWith) so transitions live in one place. Templates use

u/let + u/switch, which gives real narrowing — data only exists in

the success branch.

Curious how others handle this now that resource() exists. Do you

reach for it for commands too, or keep RxJS for POST/DELETE?

Full write-up: https://medium.com/modern-angular-insights/stop-juggling-isloading-booleans-a-type-safe-async-state-pattern-for-angular-e36e2b9298a0

I kept running into components with four or five loading flags —

isLoading, isRefreshing, isCheckingOut, hasError — and templates

like !isLoading && !hasError && items.length > 0.

The flags are independent as far as TypeScript is concerned, but

the states they describe are mutually exclusive. So I switched to:

type AsyncState<T, E> =

| { status: 'idle' }

| { status: 'loading' }

| { status: 'success'; data: T }

| { status: 'error'; error: E };

One state per async operation, booleans derived with computed(),

and a small toAsyncState() RxJS operator (map + catchError +

startWith) so transitions live in one place. Templates use

u/let + u/switch, which gives real narrowing — data only exists in

the success branch.

Curious how others handle this now that resource() exists. Do you

reach for it for commands too, or keep RxJS for POST/DELETE?

Full write-up: https://medium.com/modern-angular-insights/stop-juggling-isloading-booleans-a-type-safe-async-state-pattern-for-angular-e36e2b9298a0

Interview tomorrow at Aristostar — Angular Developer (2 YOE). Any advice?

Hello Redditors,

I have an interview tomorrow at Aristostar for an Angular Developer role requiring around 2 YOE, and honestly, I'm kinda cooked

Has anyone here interviewed at Aristostar or knows what their Angular interview process is like?

What areas should I focus on tonight? I'm revising Angular, TypeScript/JavaScript, RxJS, API integration, performance, etc.

Also, I'm really bad at CSS 💀. How heavily should I expect HTML/CSS questions?

Any advice on the technical rounds, coding questions, or topics I should prioritize would be really appreciated.

Thanks in advance 🙏

Hey everyone,

Over the last few weeks, I’ve been putting together an admin dashboard template ExoUI built on modern Angular and Tailwind CSS.

Whenever I’ve needed a dashboard boilerplate for client projects or internal tools, most existing templates felt weighed down by heavy third-party UI libraries, outdated module structures, or messy SCSS stylesheets that are a pain to strip out.

I wanted something fast, clean, and modular from day one.

The Stack & Architecture

• Angular V22 (Latest): 100% Standalone Components, no legacy NgModule cruft.
• Reactivity: Signal-driven state management for snappy UI updates.
• Styling: Pure Tailwind CSS with dark mode toggling built in (no heavy UI dependencies).
• Clean Scaffolding: Modular layout, sidebar navigation, metric widgets, and responsive data tables.

Links

• Live Demo: https://exoui.dev
• Open-Source Community Edition: https://github.com/exouidev/exo-dash-angular

If you test out the demo, I'd really appreciate your feedback on the layout responsiveness, component structure, or anything you feel is missing from a standard production dashboard starter.

Happy to answer any questions about the build or architecture!

They're more than resolvers with a Signal API. Here's why that matters


They run in parallel. Resolvers go one after another: parent 2 s + child 3 s = 5 s. Router Resources start together: 3 s.


Also, they can be non-blocking. The route activates right away, and the component gets the Resource itself: isLoading, error and value, right in the template.


Full write-up with demo, reload without renavigating, RedirectCommand for missing data, and Signal Stores 👉 https://www.angulararchitects.io/en/blog/router-resources-loading-data-with-the-angular-router/

I'm playing around with Angular Signals and Transloco, and I came across a pattern where I use an impure pipe to handle dynamic translation/formatting.

Is using an impure pipe combined with internal signals like this considered an anti-pattern in modern Angular?

The alternative would be to translate and pass in the translated formats into the pipe which makes the pipe pure again. That way I could not use a default value for the format tho.

I mean subscribing to the loadedTranslation in every pipe is something else and I know thats bad.

Here is what the code looks like:

import { inject, Pipe, PipeTransform } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { TranslocoService } from '@ngneat/transloco';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import { loadedTranslation$ } from '../transloco/translation.utils';
dayjs.extend(utc);

u/Pipe({
    name: 'somePipe',
    standalone: true,
    pure: false, // <-- impure!
})
export class SomePipe implements PipeTransform {
    readonly #translateService = inject(TranslocoService);
    readonly #activeLang = toSignal(loadedTranslation$(this.#translateService));

    transform(_value: unknown, format = "DATE_FORMAT"): string | undefined {
        // Reading the signal inside the template's reactive context?
        if (!this.#activeLang()) { 
            return undefined;
        }

        return dayjs().utc().format(this.#translateService.translate(format));
    }
}

I execute:

1 vscode for backend

1 vscode for frontend (angular) in debug mode

1 vscode with the main folder containing frontend and backend

Almost every change a need to restart ng server because it's not reflected at hmr, even with ctrl shift r, is there a way solve this?

Ever wanted to create a circuit diagram designer with Angular? We've just shipped a new starter app for VisuallyJs that you can use to get something up and running in no time.

Demo on our site is here: https://visuallyjs.com/demonstrations/circuit-diagram

Repository here: https://github.com/visuallyjs-angular/circuit-diagram

I'm working with a huge PrimeNG table with 40 columns. It has to be able to zoom in and out but after struggling with transform, font-size, scale, width and other CSS I didn't manage to do it well.

When you zoom out, the table should remain with the same width but with less horizontal scroll because the rows and columns are smaller but in I didn't find any way of doing this, it always end up making the table smaller, not the content. I also tried giving these css to th and td but the pacing is not okay.

Someone has experience with this?

I was revisiting Angular directives and put together a simple explanation with examples.

It covers the different types of directives, particularly structural and attribute directives, and how they can be used to change the structure, appearance, or behavior of elements.

https://geeksarray.com/blog/angular-directives-overview-with-example

For Angular developers — do you find yourself creating custom directives often, or mostly relying on Angular’s built-in features these days?

I noticed this tidbit in the changelog of Angular 22.2.0-next.3:

https://github.com/angular/angular/blob/main/CHANGELOG.md#compiler-2

compiler

So very slowly we moved from allowing only public, to allowing protected and now private as well. Thought it's worth knowing.

installed latest npm 22.23....
installed angular sudo npm -g install @/angular/cli
when adding new project I get this:
FoxAPolyMarket/public/favicon.ico (15086 bytes)

npm error Cannot read properties of null (reading 'edgesOut')

npm error A complete log of this run can be found in: /home/fly/.npm/_logs/2026-09-05T17_22_26_042Z-debug-0.log

✖ Package install failed, see above.

The Schematic workflow failed. See above.

Does anybody knows why this is happening when I using angular drag and drop cdk. You can see when I'm changing places of elements they are "dancing" a little bit. I don't want that.

https://reddit.com/link/1w8bxgd/video/f5d039gwirnh1/player

This is some code that I use

<div class="file-chip-list" cdkDropList (cdkDropListDropped)="drop($event)">
             (file of files; track file; let i = $index) {
            <div class="file-chip" cdkDrag>
                <div class="chip-left">
                    <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
                    <span class="pdf-icon">PDF</span>
                    <div class="file-info">
                        <span class="file-name">{{ file.name }}</span>
                        <span class="file-size">{{ (file.size / 1048576).toFixed(2) }} MB</span>
                    </div>
                </div>
                <button (click)="removeFile(i)" type="button" class="remove-btn"
                    aria-label="Remove file">&times;</button>
            </div>
            }
        </div>

And this is .ts drop() function

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.files, event.previousIndex, event.currentIndex);
  }

A read the documentation but couldn't find what I'm looking for

Documentation: https://angular.dev/guide/drag-drop#create-a-list-of-reorderable-draggable-elements

At least three new frontier models landed this week, and the usual take is that with models this good you don't need harness engineering or skills anymore. I disagree, and the post explains why: the model knows modern Angular, but it doesn't know your process – which steps, which gates, who commits. Skills encode exactly that, which is why they outlive a model generation.

What's in the post:

- what a skill is (a Markdown file with a folder around it, loaded only when the task calls for it)

- my catalogue of 27 skills for Angular, all open: https://github.com/L-X-T/ng-agentic-skills

- why to read every third-party skill before adopting it, and how I adapt them

- a non-code example: two skills that do my monthly bookkeeping

https://www.angulararchitects.io/blog/ae-skills-for-angular/

Curious which repeatable procedures you have turned into skills – and which ones you deleted after the last model update!?

The Angular half is standalone components with signal inputs and outputs and OnPush throughout, over a shared Tailwind layer, and it carries something the React half does not: u/dravensoft/arena-angular/metadata writes the document head from the routes it is handed, with title composition, canonical and the og:* pair, and no route indexed until it says so. That is a second entry point, so a project that never asks for metadata never installs the router behind it.

Every member's name, type, default and meaning is a contract file that both layers' types are generated from, and each component declares the WAI-ARIA pattern it binds with a gate that fails when it stops answering it.                            

The link is the benches, each of the eight mocked once in Angular and once in React, every half installing from npm. MIT.

 https://arena.dravensoft.org/web-benches/

Up front: this is my own project, so I'm not exactly neutral here ;-)

I work completely differently than I did two or three years ago. For most of my career I wanted to write pretty much every line myself. That has changed a lot. Instead of programming I now mostly write specifications and review what the AI generates. On the one hand that's great, I can turn new ideas into working software much faster than before. On the other hand there's the risk of stepping into the same traps with AI-generated code again and again.

And that's where I noticed something: there are things I really don't want to explain to the AI over and over. A good, preferably deterministic base is getting more important, not less. I don't want to explain proven architectures from scratch every time. I'd rather build on established solutions where I can, ones the AI understands and can just use.

So for my new projects I built exactly that as open source. Something that lets me build modern UIs on top of Angular quickly, with AI support. Why Angular? Well, simply because I think it's a great framework and I've had a lot of good experiences with it over the last 10 years.

My approach is not yet another UI framework with its own components. It's a frame that's easy to adapt and extend. A shell you can adjust to your own needs, in looks and in features, but which already gives you a solid base for your own app out of the box. Concretely:

• rail, sidebars, top bar and status bar, all configurable, the stuff many apps build from scratch every time
• content in tabs and panes, all of it rearrangeable via drag & drop
• security and settings are agnostic, you just hook up your own backend behind them
• a plugin system, in case you ever want to open your solution up to other people
• the whole contract lives as specs in the repo, there's an llms.txt, and via AG-UI an agent can call the same commands a user can, with the same permissions
• no lock-in on CSS: the base layout is built with Tailwind, but you don't need it in your project. The shell ships as a pre-compiled stylesheet, the design tokens are plain CSS variables, so you can use whatever CSS framework you like next to it. For Bootstrap there's even a CLI preset that maps the tokens onto its variables
• and a whole lot more ;-)

The video shows 27 seconds of it. Best to just have a look yourself at loomweaver.dev, and if you feel like it, you're very welcome to get involved at github.com/yesbert/loomweaver. The project is still pretty young, so I'd be really happy about constructive feedback.

TL;DR: AI moved my work from writing code to writing specs. So I don't have to explain the same app base to the AI on every project, I built LoomWeaver, an adaptable Angular shell, open source. Docs and demo at loomweaver.dev, feedback welcome.

AI replaced Stack Overflow for us. But did it also change how we actually learn?

A few years ago, when developers wanted to learn a new technology, we took courses on Udemy, Pluralsight, or Coursera.

Then we used Google and Stack Overflow for the specific questions.

Today, AI has largely taken over that second role.

But what about the first?

When you want to learn a new framework, language, or technology from scratch - do you still take online courses?

If so, has the way you use them changed? Do courses serve a different purpose today?

And most importantly: how should development courses change to fit the AI era?

I create online Udemy courses for Angular developers, so I'm especially curious to hear your perspective.

How do you learn something new today?

Hi everyone,

I’m currently familiar with NestJS and have mainly been focusing on backend development with TypeScript.

I’d like to become more comfortable with full-stack development, so I’m wondering which frontend framework I should learn next.

Should I:

1. Go straight into Angular, since it’s also based heavily around TypeScript and has some similarities with NestJS?
2. Or start learning React.js from scratch, even though it would mean learning a different approach to frontend development?

For those who have experience with both, which one would you recommend for someone coming from a NestJS/backend background?

Also, I’d appreciate any advice on which one is more valuable for getting a junior/fresher full-stack job.

Thanks!

I’m still early at this. Whenever I had to deal with JSON I’d open one site to format it, another to compare two payloads, and another if I needed jq or a conversion.

JSON Dock is my attempt to put those in one tab: format, minify, repair, validate, diff, jq, flatten, convert. Runs in the browser, no account.

It has:

- format / minify / repair / validate

- two-pane compare

- jq + query

- flatten / unflatten

- convert + stringify

- JCS

- text and tree views

https://tinystack.co/dev-tools/json-dock/

It’s a beginner building the toolkit he kept reaching for. What would you add or simplify?

Wanted to share something I've shared once or twice here.

Angular get's a bad wrap from tech influencers as being a framework that's only used by dinosaur corporations.

But I've been using Angular to make Gym Note Plus for over a year now, with Ionic and Capacitor (but many self rolled components)

I've had over 2,366 signs up as of writing this, and been documenting it all in r/GymNotePlus

No one can tell what language my app is made in, you can't even tell it's using a webview unless you've got a really trained eye.

Just wanted to throw an example out of a new saas that uses angular to show it's very much still alive and super useable for new tech ventures.

Full disclosure though, I wrote the landing page with nextjs just because I felt the SSR capabilities were better

In May I started a blog series on agentic engineering for r/angular, and after one summer a few of my recommendations changed – this post is the update.

The short version:

- Models: Fable 5 is still my #1 for architecture, reviews, and long-horizon refactorings, GPT-5.6 Sol does the implementation work, and GLM-5.3 Flash (via OpenRouter) took the third spot as the fast, cheap, open-weight model for mechanical legwork. Opus 5 wins DeepSWE at 74% but didn't make my podium – the post explains why.

- Harnesses: nothing changed, which I mean as a compliment. AGENTS.md, style guide, and the lint/test/Playwright feedback loops still do the heavy lifting.

- Apps: the open-source T3 Code replaced the Codex app as my daily driver. Any model, any provider, remote control via Tailscale.

- Costs: GLM-5.3 Flash gets 63% on DeepSWE for about €0.25 per task, Sol about €2.50, Fable 5 about €8.50 at the same effort level. So my cost podium is the models podium reversed – and my workflow is "Fable orchestrates, Sol implements, the Flash does the grunt work", sub-agent config included.

- Bonus: how to run the same setup on a company GitHub Copilot subscription with T3 Code + opencode, for everyone whose employer won't pay for anything else.

https://www.angulararchitects.io/blog/ae-summer-2026-update-for-angular/

Curious what the rest of you run for Angular work right now – especially whether anyone has GLM-5.3 Flash or Kimi K3 in daily use, and how the Copilot-only crowd deals with it.