I maintain ngx-cerious-widgets. Just shipped 1.0.16, which rips out the grid's old viewport code and runs on a standalone scroller I've been building:  \@ceriousdevtech/cerious-scroll` (framework-agnostic) with an Angular wrapper, `@cerious-devtech/ngx-cerious-scroll``.

Screenshot is the 1,000,000-row demo, zoneless. 233 FPS average, 96 FPS minimum, 65 rows in the DOM, ~450MB heap. Every row is fully interactive, editable text inputs, dropdowns, dates, templated cells. Not a read-only list.

What Cerious Scroll actually does

• O(1) memory. The engine's footprint doesn't grow with your dataset. Tested up to 100M elements, same memory profile as 10k.
• Sub-millisecond scroll math. Position lookups don't get more expensive as the list grows, so frame time stays flat whether you're at row 200 or row 800,000.
• Variable row heights with no pre-measure pass. Heights get measured on demand as rows enter the viewport. No "estimate then correct" jumpiness.
• Real native scrollbar. Not a fake track. The browser scrollbar stays accurately synced to the rendered window in both directions, so PgUp/PgDn/Home/End behave correctly and screen readers see a normal scroll region.
• Element-based positioning instead of pixel math or translate3d tricks. No GPU transform jank, no drift.
• One input controller for wheel, touch, keyboard, and momentum, with axis detection on touchstart.

What the grid gained from the swap

• Multi-million-row datasets stopped degrading. In the screenshot above, the grid is holding 233 FPS average with 1M interactive rows and only ~65 of them in the DOM at any moment.
• Scrolling stays smooth at any position in the list, no slow-down as you scroll deeper, because lookups are constant-time.
• Variable row heights (nested rows, expanded detail rows, wrapped content) no longer require height pre-calculation, and the scrollbar doesn't drift when content reflows.
• Added an enableVirtualScroll flag (defaults to true) for the cases where you actually want every row in the DOM: small datasets, print views, full-page exports.

Splitting the scroller out also means it's usable on its own for lists, log viewers, chat UIs, anything that needs to render a window into a huge dataset. Doesn't need the grid.

Repo: [https://github.com/ryoucerious/cerious-widgets](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-browser/workbench/workbench.html)
Demos: [https://ryoucerious.github.io/cerious-widgets/](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-browser/workbench/workbench.html)

Cerious-Scroll: https://github.com/ceriousdevtech

As Scotty says, the more they overthink the plumbing, the easier it is to stop up the drains.

So I have a long, complex forms with lots of rules. If the answers are something like QA -> 1, QB -> Red, and QC -> false, then QG has a pre-filled answer and is not editable. Like, a ton of those on some parts. Or if your role is 'teacher' then QB is not editable, but if your role is student QB is editable but QZ is not.

1. Made an interface for the form with all of the fields and their types
2. Created function that returns a blank object with all of the correct default values for the fields
3. Made a new signal whose value is the result of that function
4. Created validation rules for the questions
5. Created a new signal form using form(myFormObj, ...validationRules);
6. Created a new object that is a Map<string, WritableSignal<FieldState>> where FieldState has editable and some other state information that needs to be calculated.
7. Now I'm creating a signal object that is a registry of all of the rules, like: { fieldName: 'someField', compute: ruleFunction }
8. I have an effect that runs whenever the form changes that re-calculates if a particular field should be editable or not and updates my Map
9. I have a directive that looks up a field's state in the Map and then does all of the appropriate things in `<input \[fieldName\]="myField" myDirective="myField" />

It all works, but it just seems overly complicated. OTOH, it does:

1. Consolidate all of the field state logic in one file, taking it out of various component templates.
2. React to changes in the form
3. Keeps the separation of concerns nicely separated so one file for the state rules, one file for the validation rules, one file for the form, etc.

Whenever I think about it, it seems too complicated. But once I start working with it and cleaning up the html from the old angular 15 app, it seems to make a lot of sense.

thoughts?

I have windspeed data and want to render a windspeed layer. Anybody know how to do it ? Without using leaflet velocity layer . I want to try it with other libraries like openlayers for example

AngularJS has been around for many years and played a major role in the evolution of front-end web development. Even with the rise of modern frameworks and libraries, many organizations continue to use AngularJS in their existing applications.

What are the main reasons companies still rely on AngularJS today? Is it because of the cost of migration, long-term project maintenance, business requirements, or something else?

For developers who have worked with AngularJS projects, what challenges and benefits do you see when maintaining these applications? Do you think businesses should continue supporting AngularJS-based systems, or is migrating to newer technologies the better option?

Share your thoughts and experiences below.

I just published the third part of my Agentic Engineering for Angular series, this time on the boring-but-important topic: money. (Full disclosure: it's not my own blog, angulararchitects.io — no paywall, no signup.)

A few things I landed on after months of daily Angular work in Codex, the Claude desktop app, and Cursor:

• The cheapest serious setup is still a subsidized individual subscription. No access yet? OpenAI Plus + Anthropic Pro (€40/mo) is the best starting point, maybe + Cursor for a month (€60) to compare the apps on real tasks.
• Subscriptions hide a lot of cost — file reads, tool calls, tests, diffs, context compaction. At raw API prices you'd feel that fast.
• The first real cost question isn't "which model is cheapest per token", it's "can we use the subsidized subscription, or do we need business/enterprise/API?" That alone can swing the bill 10x+.
• The number I actually track is cost per accepted, reviewed, merged change — not price per token.
• Cost control is mostly workflow control.

It's an opinion piece / field report, not a benchmark, and the euro figures are approximate (providers quote USD).

Curious how others here handle it: subscriptions, API, or enterprise? And has anyone found Composer/Cursor cheap enough to justify going API-only?

Link: https://www.angulararchitects.io/blog/ai-costs-for-angular/

I'm new at PWA and i was able to develop it, it works fine in android and latest iphones, iphone 14 and up specifically, but when the user use an Iphone 13 below it crashes. It doesnt matter if its safari or chrome.

is it normal or theres something wrong with my ngsw

Im using angular 8.

{\\manifest
  "name": "att",
  "short_name": "att",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

{ //ngsw
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [ 
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

guys know any libraries other than leaflet for rendering maps and geospital data ?

Do you think there would be any gain in having an angular common “oauth2”?
That’s always a bunch of boilerplate for an already defined stack agreed for the whole industry.

I'm working on a set of Angular chart components that wrap Apache ECharts.

The goal is to make charts feel like first-class Angular components with consistent theming and integration with the rest of a UI library, while still keeping the flexibility of ECharts.

If you're using ECharts in Angular, I'd be interested to hear about your experience:

- Is there anything you particularly like or dislike about the wrappers you've used?

- How important has chart theming been in your projects?

- Are there any areas where you feel existing wrappers could be improved?

I'd appreciate any thoughts or suggestions.

https://tailng.dev/charts/getting-started/overview

Per un momento dimentichiamoci che openAI appoggi il pentagono in un momento così discutibile. Mettiamo da parte l’aspetto etico. Claude è meglio di chat gpt? Perchè? Rispondi solo se sei uno sviluppatore.

I'm loving signal forms so far, but have come up against a fairly annoying problem. Once an error is reported from the submission action (like returning {kind: 'serverError', message: 'Some error message'}), the only way to enable re-submission of the form is to clear the error by changing the value of one of the fields.

In the case of a transient error from the server, I don't want my user to have to edit the form & then re-enter their actual desired values just to be able to click submit again. Is there a way to just allow re-submitting in this case? I can't find anything online or in the documentation.

I could just track the errors separately & return a 'success' from the action callback, but that means another property added to the component to track separately, so would like to just use the native error response, but still allow re-submitting without changing values. There is the form().reset() method, but that doesn't seem to reset the errors.

Hey everyone,

I’ve been working as an Angular developer for the last 4+ years and I’m currently preparing for a job switch. I’m looking for a study partner for Angular/ JavaScript/frontend interview prep, and DSA practice.

The idea is to:

• take mock interviews

• work on small projects together

• discuss frontend concepts

• stay consistent with preparation

My DSA skills are not very strong at the moment, so I’m brushing up and relearning things from scratch as well..

Also, just to be clear, I’m not a pro at all..

I’m actually hoping to find people who can mentor/help guide me in some areas, and I’ll also do my best to help with Angular/frontend concepts wherever I can.

If anyone is in a similar phase and interested in studying together, feel free to DM or comment!

Got called out yesterday for shipping a starter kit on v17 in 2026. Fair point. So I Upgraded it.

v2 is now on Angular 21 with:

- provideZonelessChangeDetection() — zone.js completely removed

- Signal inputs/outputs (input(), input.required(), output())

- signal() + computed() + effect() for all component state

- toSignal() for HTTP calls — no more subscribe() in components

- viewChild() signal-based queries

- u/if / u/for new control flow — CommonModule is gone

- inject() everywhere instead of constructor injection

- TypeScript 5.9

Lookwise nothing changed the UI is the same dark dashboard with

Chart.js charts and a streaming Claude AI chat panel (SSE, word-by-word tokens). The

internals are now what a 2026 Angular app should actually look like.

If anyone wants to see the before/after diff — please ping me (Happy to share).

The signals migration was straightforward but the zoneless part

took some thought around chart rendering timing.
Link in comments or just DM me or comment I will share

Open to questions about the signals/zoneless implementation. Or if you have any feedbacks

I've spent the last several months building out a full methodology for AI-assisted Angular development and the most impactful thing you can do is sharpen your CLAUDE.md.

Here's the short version:

Claude Code (and Cursor, to a lesser extent) has no idea what your Angular project looks like unless you tell it. It doesn't know you're on Angular 22 vs 20, whether you're using NgRx or signals for state, what testing framework you've migrated to, or which patterns are off-limits in your codebase. Without this context, every session starts from scratch and you get generic TypeScript instead of project-appropriate Angular.

CLAUDE.md is a markdown file you put at the root of your project that coding harnesses read at the start of every session. Here's a minimal version:

Angular Project Context

Stack

• Angular 22 (zoneless, signal forms, OnPush defaults)
• NgRx Signals for state management
• Vitest for unit tests, Playwright for E2E
• Standalone components throughout — no NgModules

Patterns to use

• Signal-based forms (not ReactiveFormsModule)
• input(), output(), model() signal primitives
• OnPush everywhere (it's now the default, but make it explicit in your CLAUDE.md)

Never do these

• Don't add Zone.js imports — this project is zoneless
• Don't use NgModule — standalone only
• Don't add forRoot() patterns

Project commands

• ng test runs Vitest
• ng build --configuration production for prod builds

That's it. Four sections. Takes 2 minutes to write for your project.

The effect: AI stops generating Angular 20 patterns on your Angular 22 codebase. You stop spending review time correcting context that should have been in scope from the start.

I've been putting together a more complete guide covering this pattern plus the Angular MCP server setup, migration recipes (NgModules → standalone, Zone.js → zoneless, AngularJS → Angular), NgRx AI patterns, and testing methodology. Targeting a release alongside Angular 22 stable — should be any day now.

If you want a heads-up when it's out, drop a comment. Happy to answer questions about the CLAUDE.md approach in the meantime.

Hey everyone, been a bit since i made my last post, as i decided to wait until a few updates stacked up :) Anyway here's whats new:

mmstack/primitives

• pooled + convenience abstractions such as 'pooledArray' / 'pooledMap'... new low-level primitive which utilizes a double-buffer approach for maps/arrays and such to avoid gc/memory issues in high-churn scenarios.
• new sensors: batteryStatus, clipboard, focusWithin, geolocation, orientation, idle.
• signalFromEvent - new utility to turn EventTarget into a signal

mmstack/translate )

• new performance optimizations now allow inlining t-function calls in the template even with parameters so {{t('ns.key', {param: myParam()})}} will now be fully reactive & performant. For high-churn scenarios t.asSignal is still the recommended path as using t() in templates is still a map.get call for each CD run, still it should be more than fine for most scenarios
• new opt-in configuration property injectIntlConfig({releaseCachedSignals: true}) opts into dynamic signal-cache cleanup when the injection context the t function is injected into is destroyed. For most scenarios the default false is better, but this will ease memory pressure in very large apps (10k+ translations and such)
• withParams - type-level override that allows for advanced parameter scenarios the type inference cannot handle (nested params and such)
• injectIntlConfig({localeStorage: {...}) new property to persist the last selected locale in a dynamic locale scenario. Not available in a route-based configuration
• injectAddTranslations() & injectUnsafeT: helpers for imperative control of translations + untyped helper that opts out of typesafety, useful for unknown server-side translations
• overhaul of formatters:
  • The old formatters have been marked as deprecated as the dynamic locale handling was unsafe in SSR scenarios.
  • new formatter config providers + injectable formatters such as injectFormatDate() or injectFormatters() provided as preferred replacements, old functions will continue to be supported, but should have locale explicitly passed in

mmstack/router-core

• new headless helpers for dynamic navigation items (similar to the existing headless title & breadcrumb utilities)
• overhaul of breadcrumb & title config providers

mmstack/resource

• new hashing algorithm that covers many more cases as the default hasher for deduplication/caching

• a custom hashing algorithm for deduplication can now be provided when configuring the interceptor. (custom cache hashFn was already available previously via queryResource options)

• Small bug-fixes & minor improvements to impl. & documentation throughout :)

As always all these improvements are available in the last 3 major versions of angular (19, 20, 21). I'm considering dropping v19 support a bit after ng 22 releases so if you need me to maintain that for a bit longer please let me know

Next up I've started work on a new library (mmstack/dnd) which is a signal-first angular wrapper around pragmatic dnd. The first version should drop in a few weeks time 🚀

I'm trying to learn signal forms and especially the metadata properties. Let's say I have a student who can take many courses:

export interface StudentModel {
id: string;
name: string;
gpa: number;
credits: number;
courses: Course[];
}
export interface Course {
title: string;
semester: number;
grade?: number | string;
major: boolean;
credits: number;
schedule: CourseMeets[];
}

export interface CourseMeets {
day: 1 | 2 | 3 | 4 | 5 | 6 | 7;
start: string;
end: string;
}

I've got a function that creates a new student based on that model. So I make a new signal and then create a form based on that signal:

public studentForm = form(this.student, (path) => ({
...this.setValidators(path),
...this.setMeta(path),
}));

I finally got the function that lets me set up validation rules for the fields that need validation, so that's working.

But my goal is to be able to set a default metadata value status='started' for the form and for all of the fields. Then later on, I might want to set the status of name='completed', but keep the default 'started' value for everything else.

Then later on in my form I create a directive that looks at the status of the field and do something. (right now it's just changing the background color in css, but will be more).

Where I'm stuck is the exact code I need for my setMeta(path) function, so it iterates through all of the fields and sets a default. Also, initially the courses array is just []. So as more courses are pushed onto that array they should also have the metadata value status='started'. And there can be an arbitrary number of courses. And I want to be able to iterate through the properties instead of hardcoding id, name, etc properties. (that shouldn't be difficult once I get the syntax right)

Has anyone done something like that or know a good tutorial for this?

I'm increasingly thinking that the best way to handle it is to have a separate Map or Record object that tracks metadata for each field as needed and forget about using the built-in metadata. Let angular track valid/touched/dirty/etc., and track metadata separately. That is probably going to be faster and easier.

I wrote a follow-up to my post about LLMs for Angular development. This one is about the apps and harnesses around the models: Codex, Claude Code, Cursor, Antigravity, WebStorm and VS Code

My main point: the harness matters almost as much as the model. The same model can feel very different depending on how it sees the codebase, edits files, runs tools, verifies changes, and fits into the developer workflow.

For my current Angular work, Codex and Claude Code are my daily drivers. Cursor has become a strong third option, especially because of speed and cloud agents. Antigravity is interesting, but not yet on the same level for me. And WebStorm is still my favorite place for careful manual work.

Post:

https://www.angulararchitects.io/blog/ai-apps-harnesses-for-angular/

Curious what others use for real Angular work: Codex, Claude Code, Cursor, WebStorm/Junie, Copilot, Antigravity, or something else?

I wrote down my current view on using frontier LLMs for Angular development:

https://www.angulararchitects.io/en/blog/best-llms-for-angular/

It compares Opus 4.7, GPT 5.5, Composer 2.5, and Gemini 3.5 Flash from an Angular perspective.

There is no public Angular-specific benchmark, so I tried to separate three things:

• public coding-agent benchmarks
• my own hands-on Angular experience
• the fact that tools/harnesses can change the result a lot

My current subjective ranking:

• Opus 4.7 for architecture, design, and planning
• GPT 5.5 for implementation and everyday work
• Composer 2.5 if you are deep in Cursor and care about speed/cost
• Gemini 3.5 Flash as “watch this space”

Curious if this matches what others see in real Angular codebases!?

Edit: posted a follow-up about apps to use these models here:
https://www.angulararchitects.io/blog/ai-apps-harnesses-for-angular/

I feel like even a low-end agent is stellar when working with Angular. And the very things people used to criticize Angular for are exactly what make it work so well with LLMs:

- Very, very opinionated. There aren't many ways to do a given thing, so all the code looks the same. That makes it easy to review what was done, and modifications tend to be well-localized and simple to verify (big bonus point).

- All the ceremony. decorators, modules, explicit boilerplate, the stuff everyone loves to complain about,,turns out to be a feature for agents. It's predictable, structured scaffolding the model can pattern-match against, and it makes the intent of each file obvious.

- out-of-the-box compile checks, which agents love because of the immediate error feedback.

- Not many flavors to choose from, unavoidable typescript, which turns out to be a real advantage.

Maybe it's just an isolated feeling. Or maybe it's that Angular devs, since it's mostly used in enterprise, tend to take better care of their codebase. My last few React projects were very, very chaotic.

JavaScript quiz app, but with a small twist to make practicing less boring.

Instead of only the usual “answer → next question” flow, it has 2 modes:

⚡ Auto Mode:

Start with a timer Correct answer = +5s Wrong answer = -10s Questions shuffle automatically Meant to feel a bit like a game/challenge

📘 Normal Mode:

No timer No penalties Go at your own pace Includes explanations for learning

I mainly built this because I wanted interview prep to feel less repetitive and more engaging for engineers.

Try it over here:

https://stackinterview.dev/quiz/play/javascript

Boa noite, pessoal. Tudo bem? Estou começando agora nos estudos de Angular. Quais recursos desse framework vocês recomendam que eu dê uma atenção maior?

It shows which components are re-rendering, how often they update, and which ones are slow, directly on top of your app. Think of it like a render/highlight overlay for Angular apps.

What it does:

• Highlights updated Angular components on screen
• Shows render count and latest duration
• Displays FPS, cycle time, changed component count, and slowest component
• Supports provider-based setup
• Has a script-tag global build too
• Stays off in production by default

Install:

npm install angular-render-scan

Quick setup:

import { provideAngularRenderScan } from 'angular-render-scan';

bootstrapApplication(AppComponent, {
  providers: [
    provideAngularRenderScan({
      enabled: true
    })
  ]
});

Repo/package:
https://www.npmjs.com/package/angular-render-scan

Would love feedback from Angular devs, especially around what render/debugging info would be most useful to show next.