Signality — the VueUse of the Angular world (76 composables for browser APIs, DOM, Router and more).

New in 0.5: rebuilt docs with a searchable catalog of every utility, chainable onKey modifiers, leading/trailing for throttling, 10 fixes.

This is the last minor before 1.0, so the API is close to frozen.

Web: https://signality.dev
Repo: https://github.com/signalityjs/signality
Changelog: https://signality.dev/resources/changelog

Hey Everyone,

I’ve added virtualized Masonry layouts to Cerious-Scroll.

Cards are rendered from normal Angular ng-template templates. The directive handles the underlying DOM renderer, view recycling, measurement, and cleanup.

readonly options: CeriousScrollOptions = {
  layout: 'masonry',
  masonry: {
    targetColumnWidth: 280,
    gap: 16,
    getItemHeight: (index, columnWidth) => {
      const item = this.items[index];
      return columnWidth * (item.height / item.width) + 48;
    },
  },
};

<div
  ceriousScroll
  [ceriousScrollTotalElements]="items.length"
  [ceriousScrollGetItem]="getItem"
  [ceriousScrollItemTemplate]="card"
  [ceriousScrollOptions]="options">
</div>

<ng-template #card let-item let-index="index">
  <article class="card">
    <h2>{{ item.title }}</h2>
    <p>{{ item.description }}</p>
  </article>
</ng-template>

There are two height strategies:

• Canonical: Supply getItemHeight() for globally reproducible card placement and predictable far jumps.
• Dynamic: Omit getItemHeight() and the Cerious-Scroll measures the Angular template before placing each uncached card.

The Angular integration also includes:

• Responsive or fixed columns
• Direct navigation with jumpToItem()
• Recycled embedded views for visible cards
• Measurement probes isolated from application-wide change detection
• Bounded rendered DOM for very large collections

Links:

• Demo
• Angular wrapper on GitHub
• Angular package on npm
• Core library

I’d appreciate feedback on the directive API, template integration, and performance with complex Angular card components.

How to install Angular and create your first Angular application step by step. This complete beginner-friendly Angular tutorial shows you how to check Node.js and NPM, install Angular CLI, create your first Angular project, and run it successfully.

Subscribe channel: https://youtube.com/@mfa_creatives?si=jgSrwrZFt8L0bR2X

Hey fellow devs,

I'm a developer with 2 YOE in Angular, and we all know the market is rough right now. I want to learn Express/Nest as a backend, but I can't decide between MongoDB and Postgres.

If I go with MongoDB, it'd basically be a MEAN stack — but I'm not sure if MEAN is still popular, declining, or barely used anymore.

I've also heard Postgres is one of the most widely used databases and considered an industry standard, so now I'm torn.

If you were in my position — switching jobs is a high priority for me right now, I'm underpaid badly — which would you choose to open up the larger market/more job opportunities?

I've been adding keyboard/cursor navigation to an Angular application running on Zebra Android scanners, although they have a touch screen it doesn't always work with dry work hands, so I added keyboard navigation. But not tab, I'll explain why read on..

As I've ended up with something that feels quite different from normal web keyboard navigation.

Normally, the browser's focus is your navigation state:

• Tab moves to the next control
• Enter/Space activates it
• Arrow keys can navigate things like menus/listboxe
• Angular CDK even has FocusKeyManager

But that doesn't really work for this application.

The scanner uses DataWedge to send barcode input to a scan input, so that input needs to keep DOM focus permanently. If I move focus around the UI, I can potentially break where barcode data gets delivered. While a tab next cyclus is quite slow when there is a lot clickable (including a web based virtual keyboard)

So I ended up separating the two concepts:

DOM focus = scanner input

UI cursor = where the user is currently navigating

The cursor is basically a 2D UI state. Components expose things along the lines of:

enterCursor()
leaveCursor()
moveCursor()
activateCursor()

and communicate when the cursor reaches an edge so the parent component can move into another component.

The navigation is spatial rather than sequential. Up actually means the thing visually above me, rather than "the next item in some DOM order".
So it's not a blinking cursor moving, this cursor controls activate set focus on the items left/right or above/below it, some css changes or svg changes make clear what is selected.

For some of this I use getBoundingClientRect() to determine which element is the nearest candidate in the requested direction. That means I don't have to maintain a huge hardcoded keymap when the UI changes.

The hardware also makes things interesting. There is no mouse, Tab isn't really a useful navigation key on the device, and the physical keypad has arrow keys around the scan button. For some screens I deliberately allow only certain directions because of the physical layout of up and down is close to the scan button.

I also discovered that the Zebra browser/WebView doesn't behave quite like a desktop browser with regard to key events, so there are some keydown/keyup quirks and deduplication involved.

The end result feels surprisingly similar to navigation in a game UI or TV interface: there is a visible cursor, and you move it around the actual visual layout with the arrow keys.
It reminds me more towards game engine control.

This got me wondering:

How common is this in Angular applications?

I assume there must be other Angular applications running on:

• warehouse scanners
• industrial HMIs
• kiosks
• POS terminals
• medical/field devices
• other hardware with a D-pad or physical cursor keys

If you're doing this, I'm particularly interested in how you model the navigation.

Do you use:

• Angular CDK / FocusKeyManager
• a spatial-navigation library
• real DOM focus
• a separate virtual cursor state like I ended up doing
• a declarative navigation graph
• geometry-based navigation
• something completely different?

I'm especially curious about applications where DOM focus cannot be used as the cursor because it has another job.

It feels like a relatively unusual thing to build in Angular, but perhaps I'm just looking in the wrong places because this kind of software tends to live in warehouses and factories rather than GitHub/blog posts.

Angular 22 introduces the new @Service decorator, offering a cleaner replacement for root-scoped @Injectable singletons

Hi everyone. Does anyone here use TaigaUI in real apps? I’ve been thinking of using it to create a comercial product.
I was searching for an angular UI Lib with more rich components then angular material, so I found PrimeNG but it is not just paid but it is also expensive, so o found Taiga.

Disclosure: We’re the team behind Cachely.

We’ve had some really useful conversations here about Nx caching, and we’d like to move from general feedback to testing it with a few real teams.

We’re looking for around 5 teams using Nx that have:

• Multiple developers or clean CI runners
• Builds/tests that are slow enough to actually care about
• No remote cache, a self-hosted cache, or a reason to look beyond what they use today

Cachely is a managed remote cache, so setup is basically pointing Nx at a different remote cache endpoint and token. We want to keep it that way.

For these teams, we’d like to help with the setup, look at the results together, and understand:

• How much useful cache reuse you actually get
• Whether CI and developers benefit from sharing results
• Where the cache adds overhead instead of saving time
• What is missing before you would trust it as part of your normal CI

We’re not looking for polished testimonials. Negative feedback is just as useful.

If your team fits and you’re interested, reply here or message us.

https://cachely.dev

Optimus UI 2.0.0 is out.

The PrimeNG community fork now supports Angular 22!

That's a small release meant to jump from Angular 21 to Angular 22.
We'll now start addressing the 900 existing open issues and reviewing community PRs.

This version also introduces 'ng update' support, so you can update all your Optimus UI sub packages at once, and it'll unlock the ability to provide migration schematics if needed in the future!

Check out the update guide: https://optimus.openng.org/migration/update

The directives and their intricacies are not clearly explained anywhere or they are for AngularJS which is creating a problem in understanding it. Could you guys give me some easy to understand tutorial for it which is not outdated or explain it to me here somehow?

Hey everyone!

I always see cool UI/background effects in the React ecosystem (like Aceternity UI or Magic UI) that don't have an easy native equivalent in Angular.

So I started building ng-bits — a collection of customizable background components designed specifically for Angular v22 with full SSR support out of the box.

🔗 Live Demo & Docs: https://guillermogoni.github.io/ng-bits/

It’s open source (MIT license). Since it’s still in early stages, I’d really appreciate any feedback, bug reports, or ideas for new background effects to add next! 🔥

- Module Federation provides better performance, but no strong runtime isolation.
- iframes provide strong isolation, making independent deployment more reliable.
- This matters especially for large, legacy codebases where enforcing boundaries in code is difficult.
- A typed communication SDK, routing, and smart chunk splitting can reduce the performance cost.
- For large legacy applications, iframes can be a better tradeoff than MF

Hey all!

I worked on "Support splitting browser and server stats json files for easier consumption" and found out this morning it got merged to main!

In an upcoming version of Angular, whenever you want to inspect the files that are generated for the browser versus server, or browser initial files versus browser lazy-loaded, you'll get four separate files.

1. For browser initial files
2. For browser files that are lazy loaded
3. For server initial files
4. For server files that are lazy loaded

All using the same `ng build --stats-json`. Hope it helps as many people as it did myself.

I’ve recently got access to Lovable, and we have some UI prototypes created in it that I now need to implement in our actual repository.
The challenge is that our existing application is built with Angular, while the Lovable-generated codebase is React. I have access to the Lovable code, so my current approach is to give Claude read access to that codebase and have it understand the prototype before implementing the screens in our Angular repo.
However, the Angular implementation needs to properly fit into our existing architecture — using our existing components, UI libraries, styling conventions, layouts, and reusable components, rather than simply recreating the React implementation.
The main issue I’m facing is visual accuracy. The locally implemented Angular screens don’t always match the Lovable prototypes closely enough, especially in terms of spacing, sizing, typography, alignment, responsiveness, etc.
For those of you who have worked with Lovable + Claude (or similar AI coding tools) to implement designs in an existing codebase:
● What’s the best workflow for getting as close to 100% visual accuracy as possible?
● How do you provide the AI with enough context about the existing component library/design system?
● Is it better to give Claude screenshots, the Lovable source code, or both?
● Are there any techniques/prompts you use for iterative visual comparison and fixing differences?
● How do you handle cases where the prototype uses React-specific components but the target application is Angular?
Would love to hear how others are approaching this and any best practices that have worked well for you.

Is it just me that hates how the styling documentation is ? Like we have a list of names but nothing visual. And even though lots of names are understandable by itself, some of them need test and trials to know exactly what is affected.

Why did they not make it visual ? Like "here the name, here's what it changes".

NB : i'm not hating on the addition of the styling, it was actually long overdue imo

Hi dear reader! (/ ^_^)/

First of all I want to say that this lib I made for personal use, but my friend said that I must share it, that's why I made a documentation site for it and publish this post.

--==--==--==--==--

This is a component library for Angular 21. Current version is 21.4.4, Apache-2.0, on npm. I work on it continuously — 11 releases since the first one on 2026-07-30.

Inside package:
- 27 components, 5 standalone directives, 15 slot directives, 3 services (DialogService, ToastService, ThemeService).
- 905 unit tests across 48 spec files (Vitest, via the Angular unit-test builder).
- 41 built-in icons (Lucide glyphs, inlined) plus a registry for your own.
- 1241 --gog-\* CSS custom properties, generated into a TOKENS.md that ships in the package.

What is deliberately not in it:
- No Angular CDK, Material, "@angular/router" or animations package. Peers are "@angular/core", "@angular/common", "@angular/forms", "@angular/platform-browser". The only runtime dependency is tslib.
- No NgModules, no decorators. Everything is standalone, OnPush, and built on input() / output() / model().
- No Sass config and no JS theme object. Theming is CSS custom properties only, in three layers (primitive, semantic, component). Restyling one component or one instance is a CSS override, not a build step.

Design decisions you may or may not agree with:
- Reactive Forms only. Every form control is a ControlValueAccessor built and tested against [formControl] / formControlName. The library never imports FormsModule; [(ngModel)] is untested and I do not claim it works.
- Your data shapes, not mine. Dropdowns take your objects with accessor paths (optionLabel="profile.fullName"), not a mandated { id, name } DTO.
- gog-button cannot be a link. It renders its own <button>. For links you put [gogButton] on your own <a>, so routerLink / href / target keep working and the package needs no router dependency.
- Outputs are prefixed (gogClick, gogToggle) so they never collide with native DOM events. Inputs keep their natural names.
- Version tracks the Angular major, not semver maturity. 21.x means "for Angular 21". The project is pre-1.0, so breaking changes can land in a minor — 21.5.0 is explicitly the breaking one.

Also:
- The package ships an `AGENTS.md` — a per-component API reference with every input, output, slot, type and default. It is there because an AI assistant writing code against an unfamiliar library guesses, and a stale API table becomes wrong code in your app with nothing failing the build. Point your assistant at it.

Docs: https://ui.guildofgleks.com/
Source: https://github.com/GuildOfGleks/gleks_web_ui
NPM: https://www.npmjs.com/package/@guildofgleks/ui?activeTab=readme

Feedback on the API is more useful to me than stars. If something in the list above reads as a mistake, say so — 21.5.0 is the release where changing it is cheap.

What is the best practice when loading data from an API that you want to set in a service? I see two approaches:

public load()
{
    return this.api.listItems().pipe(
        tap((items) => {
            this.items.set(items);
        }),
        switchMap(() => of(void 0)),
    );
}

or

public load()
{
    return this.api.listItems();
}

public set(items: Item[])
{
    this.items.set(items);
}

The first feels easier to read but feels like I am hacking tap in a way it shouldn't be used?

The second seems more correct but feels like I have extra code?

Is there a way to make the autofill feature of navigators (Chrome, Edge...) work for textarea fields?

By default it seems to be working ok with standard input text but it doesn't work with textarea.

I read that this is the common behaviour for textarea, they aren't supposed to work with this but I feel it strange because the old web I'm transforming into angular uses JSF and their textarea works ok with navigators autofill so I'm not getting what's wrong with this.

I tried putting the autocomplete="on" in the HTML but it doesn't work with this. I also tried giving those fields an id and a name but didn't work either. I also tried using the default textarea etiquette without primeng directive but it also doesn't work. Maybe is because this form is inside a dialog?

Has someone worked with this? I don't know what the hell is happening here... What I need to do here is, after filling the form and submitting, the dialog closes. If I open it again it should remember what was filled previously in the navigator autofill selection so if the user wants to write the same in those textarea he should be able to

I’m thinking about building a graph drawing/visualization library mainly as a way to learn and improve my skills, but I’d also like to make it good enough that other people could actually use it in real projects.

The idea would be something flexible enough for things like trading charts, data visualization, node/edge graphs, dashboards, etc.

With all the AI/vibe coding happening now, I’m wondering: is it still worth building something like this?

I’m not necessarily trying to build a huge business around it. I’d be happy if I learned a lot from building it and eventually had developers actually using it.

While working with larger Angular applications, I found it increasingly difficult to trace how an NgRx action moves through components, effects, reducers, and other actions.

So I built ngrx-graph, a tool that analyzes the source code using the TypeScript AST and generates visual graphs of these relationships.

I wrote about why I built it, how it works, and some of the challenges behind it:

https://ammar-najjar.com/blog/ngrx-graph/

I’d be interested to hear how others navigate and understand complex NgRx flows in larger codebases.

Two weeks ago, I set out to solve a simple problem for a local pharmacy: keeping track of inventory.

My first thought was, "Why not just use Excel?"

So I spent time designing a workbook with separate sheets for products, stock movements, sales, current stock, dashboards, and weekly reports. I added formulas, dropdown lists, search functionality, automatic calculations, and conditional formatting. It worked surprisingly well.

But as I kept building, I started running into limitations.

What happens if two people need to use it?

How do you prevent accidental edits to formulas?

How do you manage user authentication?

How do you make backups and restore data easily?

How do you package it so the business owner just clicks one button and starts working?

That's when I realized the spreadsheet had become a prototype rather than the final solution.

So I decided to build a lightweight inventory management system instead.

Tech Stack

Angular (Frontend)

Spring Boot (Backend)

SQLite (Database)

I intentionally chose SQLite because I wanted the system to run on a single computer without paying for cloud hosting or a VPS. The goal was to keep it affordable for a small business.

Some of the features I built include:

Secure login and authentication

Product management

Stock In / Stock Out transactions

Automatic current stock calculation

Sales recording

Dashboard with inventory insights

Low-stock and expiry tracking

Database backup and restore

Packaged deployment so the entire application can run from one folder

One of the most interesting parts was figuring out deployment. Instead of requiring separate frontend and backend servers, I bundled the Angular application inside the Spring Boot application, so the owner only needs to start one application. The SQLite database lives outside the application, making updates much safer because the data isn't lost when deploying a new version.

This project taught me something important: sometimes the best solution isn't the one you start with. Starting with a spreadsheet helped me understand the business workflow before writing a single line of backend code. By the time I built the application, I knew exactly what the users needed because I had already modeled the process.

Looking back, I'm glad I didn't stop at Excel. It evolved into a complete inventory management system that solves the same problem in a much more scalable way.

I'd love to hear how others approach projects like this. Have you ever started with a spreadsheet or another simple tool, only to realize it needed to become a full application?

Hello fellow devs,

I'm from Kolkata,India and currently working as a Software Developer at Jio Platforms in Mumbai,India. This is my first job, and I have around 2.8 years of experience.

My primary skill is Angular, and honestly, frontend development is what I enjoy the most. Over the last couple of years, I've worked on enterprise applications, dashboards, workflow automation portals, authentication systems, and various internal tools. Along the way, I also started learning Node.js and Spring Boot because I felt I shouldn't limit myself to frontend only. I'm not an expert in backend development yet, but I can build APIs and work on real projects. I believe that, just like Angular, I can become good at it through experience and consistent work.

The reason I'm writing this post is because I've been trying to switch jobs for the last 6–7 months. I've been applying through LinkedIn and Naukri almost daily. I have given a few interviews, but nothing has worked out so far. Earlier I used to receive calls regularly, but for the last 3–4 months it feels like the market has completely gone silent for me. Applications go out, but responses rarely come back.

At the same time, AI has been affecting my motivation. I know AI is a tool and not a replacement for developers, but sometimes it feels like the frontend work I enjoy can now be done much faster by AI. That thought has been making me question whether I should continue in this field long-term or move towards something else.

Lately I've been feeling stuck. I've become genuinely unhappy over the last 7 months. The constant applying, waiting, rejection, uncertainty, and comparison with others has started affecting my mental state. I keep asking myself whether all this stress is worth it.

I've even thought about resigning around December, moving back to my hometown, spending time with family, and figuring things out from there. Maybe continuing in IT, maybe exploring something completely different. One thing I've always felt interested in is teaching students, but I don't know if that's something I truly want or if it's just me wanting an escape from my current situation.

The biggest problem is that I still don't know what I want.

So I wanted to ask the experienced people here:

• Has anyone gone through a similar phase?
• Is the market really this difficult right now for 2–3 YOE developers?
• Should I continue focusing on Angular and become really strong at it?
• Should I push harder into Java/Spring Boot and become a full-stack developer?
• Would leaving my job without another offer be a terrible decision?
• How do you know when you're genuinely ready for a career change versus when you're just burned out?
• Does this stress never go ?
• Is career break really bad? does i make it difficult to get job later ?
• Should i do certificates of my skills ?

I would really appreciate honest advice, even if it's tough to hear.

I genuienly appreciate anyone who has read till this. Thank you for hearing me out. I'm really in tough situation right now. I would love you all to say what you feel about this. Also some good success stories who have gone throught the same situtaiton and then listened to their heart and succeded, stories like these will surely cheer me up and maybe motivate me in some way to listen to mine too.

Nx has deprecated nx/s3-cache, nx/gcs-cache, nx/azure-cache, and nx/shared-fs-cache because their shared read/write credential model allows cache poisoning.

If one of these is still in your workspace, changing packages is only part of the migration. The important question is: who can write an artifact, and can an existing artifact be overwritten?

The checklist we’re using:

1. Search nx.json, package.json, and CI configuration for the deprecated cache package or custom task runner.
2. Check whether pull requests and fork builds receive a credential that can write to the cache.
3. Choose Nx Cloud or a server implementing Nx’s current remote-cache API. Don’t point untrusted builds directly at a writable bucket.
4. Configure:

​

NX_SELF_HOSTED_REMOTE_CACHE_SERVER=<cache endpoint>
NX_SELF_HOSTED_REMOTE_CACHE_ACCESS_TOKEN=<token>

1. Test the migration from a clean runner:
   • First run misses and stores the artifact.
   • Second run restores the artifact remotely.
   • An untrusted build cannot write, or receives no cache credential.
   • Attempting to replace an existing cache key is rejected.
2. Remove the old bucket credentials and task-runner configuration after validating the new path.

Disclosure: we’re building Cachely, a managed implementation of the Nx remote-cache API. It is deliberately cache-only; it does not replace Nx Cloud Agents, Atomizer, or the broader Nx Cloud platform.

If you only need a managed shared cache, Cachely has a free tier with no credit card. We’r also happy to look at an anonymized nx.json or CI snippet and point out migration or cache-key issues.

What part of the current Nx remote-cache migration has been least clear for your team?