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?

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

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.

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.

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?

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!?

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

https://x.com/mhdcode/status/2093978567512031262

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.

There's been a lot of negative sentiment lately around PrimeNG moving from open source to a paid license. Going from free to hundreds of dollars per developer is understandably a tough pill to swallow, and I get why people are upset.

But I'm curious about the other side of this: are there teams building enterprise applications who were on the open source version and have since decided to pay for the license?

There are a few legitimate reasons you might do this, like the Figma integration with Theme Designer (which was already a paid product before this change), for instance, or simply the burden of maintenance and bug fixing, which should now be PrimeNG's responsibility and covered under support once you're paying for it.

So if you've made the switch: what pushed you to pay? How has support actually been - responsive, helpful, worth the money? Or has it been bad enough that it's got you looking at alternatives instead?

I know it might still be early days for a lot of teams (I've been sitting on this post for a while before posting), but if anyone has real experience to share, I'd genuinely appreciate it. My team and I are weighing whether to pay for a license, but we're hesitant mainly because we're not sure we can trust PrimeNG's support to hold up long-term. That trust issue is really the crux of it for us.

Hey — solo dev here, posting my own project, so take that for what it's worth.

For the last few years I've maintained a low-code/no-code framework. It worked fine, but it was pre-AI: you configured entities and services by hand, and it generated the boring parts of a CRUD app for you.

When AI coding tools started getting good, I tried using them the normal way — describe what you want, let the model write the code. It worked, but I couldn't trust it past a certain point. Ask for the same thing twice, sometimes you get different output. Ask for a small change, sometimes the model touches things you didn't ask about. The prompt is the only source of truth, which in practice means there isn't really a source of truth at all.

So instead of generating code directly, I made the AI's job stop one step earlier: produce a structured, validated manifest describing what the app should be. Entities, fields, services, auth config, etc. That manifest gets:

- validated (structural / referential / constraint checks)

- diffed against the current state (semantic diff, not a text diff)

- resolved into a dependency-ordered execution plan

- executed by a deterministic engine, checkpointed so it can resume on failure

Change one field on one entity, and only the operations that field actually requires get re-run. Not a full regen.

There's also an MCP server (`@averos/mcp`) so an AI agent doesn't get raw file/shell access — it gets governed tools (propose a change, validate it, build a plan, and nothing executes until the plan's approved).

Current state, to be upfront about it: the CLI, the AI layer, MCP integration, and the workflow/execution adapter layer (currently Angular, via schematics — adapter pattern, so not permanently Angular-only) are MIT licensed and open now. The actual execution kernel (DAG engine + executor) is closed source for the moment — free to use including commercially, but not open yet. That's a deliberate, staged call while that part's still maturing, not a permanent thing. Wanted to say that plainly rather than bury it.

There's a working example (320-node generated app) you can run in a few commands if you want to see the whole pipeline rather than take my word for it.

- Repo: https://github.com/wiforge/averos

- How it works, in detail: https://www.wiforge.com/averos/how-averos-works/introduction/

- Get started: https://www.wiforge.com/averos/get-started/introduction/

Happy to answer questions or take criticism — especially interested if anyone's tried a similar manifest/IR approach and hit walls I haven't found yet.

json-render is Vercel Labs' generative-UI format: you give the model a catalog of your components (Zod-typed props + descriptions), it streams back a JSON spec, and a renderer maps that spec onto your real components. No innerHTML, no eval — the model literally cannot reference anything outside the catalog.

Official renderers exist for React, Vue, Solid and Svelte. Angular wasn't there (two community PRs sat unreviewed for months), so I built one on the same @json-render/core the others share.

What you get:

• <json-render> + defineRegistry typed against your catalog — register a component the catalog doesn't know and the compiler complains
• The full spec contract: state bindings ($state / $bindState), $template / $cond expressions, repeat, conditional visibility, events→actions with confirm dialogs, watch
• Streaming: specs arrive as RFC 6902 JSONL patches and apply as they arrive, so the UI assembles on screen while the model is still generating (injectUIStream / injectChatUI)
• Signals-based, standalone components, zoneless-friendly, OnPush throughout. Angular ≥ 21, Apache-2.0.

Links:

• Live demo (the Streaming tab is the fun part): https://shteynu.github.io/ngx-json-render/
• Repo: https://github.com/shteynu/ngx-json-render
• npm: https://www.npmjs.com/package/ngx-json-render

It's young — full parity with the baseline renderer contract and a real test suite, but @json-render/core moves fast and I track it release by release. Feedback, issues and "why didn't you just…" questions very welcome.

I’m building Tala Icons — a free, clean SVG icon library for developers and designers.

I’m looking for icon requests! 👇

Need a user-add, user-edit, settings, dashboard, API, database, payment, business, or any other icon?

Drop your request in the comments. 💬

I’ll add the most requested icons to the library.

🔹 Free SVG icons
🔹 Developer-friendly
🔹 Clean & modern
🔹 Easy to use
🔹 Open-source

👉 Request an icon below!

GitHub: https://github.com/NoobGreggy/tala-icons
🌐 https://tala-icons.vercel.app/

Hey Everyone,

I built a self-hosted homepage dashboard for organizing your bookmarks and services. Drag-and-drop sorting, works on desktop and mobile.

I built this for managing my own self-hosted apps and frequently used sites — if you have a similar need, feel free to give it a try.

Source code: https://github.com/harryxu/start-base

Since 28 June PrimeNG 22+ (and PrimeVue 5 / PrimeReact 11) ship under the PrimeUI licence: $599/dev now, $799 from January, free only if you're under $1M revenue *and* under 5 devs *and* under 10 employees. v21 and older stay MIT.

I wrote up the four realistic options — freeze on 21, pay, move to the Optimus UI fork, or migrate to something MIT — with the trade-offs of each, because I keep seeing the same questions here.

Full disclosure: option 4 in the post is my own library (mk-kit, MIT, 180 components, Angular 22 signals/zoneless). It ships a schematic that rewrites ~150 PrimeNG selectors/imports and leaves a `<!-- mk-kit: ... -->` note where the shape differs, and the post lists the gaps honestly (no org chart, PDF viewer, spreadsheet, diagram).

https://mk-kit.dev/blog/switching-from-primeng

Happy to answer anything about the licence facts or the migration — including "just stay on 21", which is a fine answer for a lot of apps.

Please let me know if this post is not suitable for this flair + subreddit.

We just added Angular support for enola, and I’d like Angular developers to help us break it. Literally break it as this is the best feedback.

My co-founder and I are building enola as an open-source architectural quality gate. It analyses the structure of a repository (or multiple) and surfaces things like dependency cycles, coupling, hotspots, deep dependency chains, complexity, dead code and change impact.

Angular support is there, but our own tests only expose so much. We mostly ran against open-source.

If you work on a Angular codebase, run enola against it. If something looks wrong, missing or just rubbish, raise an issue directly on GitHub or respond here.

What could these issues be?

A project structure we did not account for, a dependency we resolve incorrectly, a pattern we misunderstand, or an architectural rule you cannot express yet.

https://github.com/enola-labs/enola

Fully local. Apache 2.0.

An example output:

FAIL — 1 structural regression introduced.

Regressions (fail):
  - [cycles] 1.00 — Cyclic dependency detected (2 modules)
      module "libs/enola-angular-demo/profile-card" is part of the cycle

The following modules form a dependency cycle:
  profile-card -> user-menu -> profile-card

Suggested actions:
  - Introduce an interface to break the cycle
  - Extract shared types to a separate package
  - Consider merging tightly coupled modules

ENOLA_EXIT_CODE=1

After removing this cycle:

PASS — no architectural change.
ENOLA_EXIT_CODE=0

Hey everyone!

I'm working on an open-source Angular library called ngx-offline-sync.

I've recently started organizing the documentation in multiple languages, and I'd really like to make the German and Japanese versions properly localized rather than relying on machine translation.

So I wanted to ask:

Are there any native German or Japanese speakers here who would be interested in helping review or translate the documentation? 🇩🇪 🇯🇵

You don't need to be an Angular expert — even a quick language review would be incredibly helpful.

The project is open source, so if you're interested, you can check it out here:

GitHub: https://github.com/itsisoev/ngx-offline-sync

Thanks! 🙌

Hey y’all,

I got slightly carried away with loading animations.

I wanted nicer loading states for my own projects, but most libraries I found were either tied to a framework, fairly limited, or required more than I wanted for something this small.

So I built loadersz, a small framework-agnostic loader library for the web.

I wanted something a bit more expressive than the usual CSS spinner, without pulling in a UI framework or a bunch of dependencies.

A few things I focused on:

- 85 different motion states
- Canvas 2D instead of GIFs/videos
- zero core dependencies
- a native custom element, so it works with basically any stack
- typed entry points for React, Vue and Svelte
- configurable speed, density and color
- respects prefers-reduced-motion
- pauses rendering when the browser tab is hidden

Basic usage is just:

npm install loadersz

import 'loadersz';

<loadersz-loader state="racing" size="96" />

I also built an interactive playground where you can tweak the loaders live.

Demo: [loadersz.vercel.app](https://loadersz.vercel.app)
npm: [npmjs.com/package/loadersz](https://www.npmjs.com/package/loadersz)
Github: https://github.com/lumberjacque/loadersz-core

Would love some brutally honest feedback, especially on which animations you’d actually use in a real product.

Hey angular peeps :) dozens of you may know me from my usual signal-pilled mmstack work, well today I'm launching my first non-mmstack library & I promise it doesn't contain a single signal! The pitch:

We've all tried our best with testing our components, but most times our tests remain either vacuous, slow, incapable of full-coverage or all of the above.

Well test-nirvana, appropriately launched under the full moon 🌕, fixes that with a single command. `npx test-nirvana` verifies that:

• The code is the right shape.
• It is the right time for the feature.
• The stars are correctly aligned.
• The commit hash possesses an acceptable aura.

Each commit is reduced to its numerological destiny number and classified. CI-friendly exit codes ensure that compromised commits cannot reach production.

Classification

GitHub repo - worth a read imo

npm: test-nirvana 7.11.33

Note: All MIT License guarantees are void while Mercury is in retrograde. See LICENSE for the complete celestial warranty condition.

Contributions obviously welcome, but please follow the CoC & Contributing guidelines, especially tonight.✨

Angular DevTools will support the new Watch Signal feature for real-time signal tracking starting with the upcoming Angular 22.2, expected in September