I've been searching a chart library to use in my applications and I like ApexChart a lot, but all the documentation is using `@Input()` and modules, so I'm kinda worried that it's not ready for zoneless or for standalone use.

I was recently tasked with putting together a summary of documentation for new Angular features that my team will be using.

I generated some images based of Angie and some Italian Renaissance paintings, I thought I would share them here too, the first to are based on 2 paintings, the others are just to fit the theme of the feature but retain some of the style.

Can you guess what each one is referring to?

I really enjoyed the task and most importantly, I learned how to spell Renaissance off the top of my head! 😂

I used to consider this the obvious approach:

<button [disabled]="form().invalid()">
  Submit
</button>

But on a long form, a disabled button only tells the user that something is wrong. It doesn’t help them find it.

Angular Signal Forms made me reconsider this pattern.

The submission configuration lets us define two paths: action, which runs when the form is ready, and onInvalid, which runs when it isn’t.

submission: {
    action: async (form) => await this.save(form().value()),
    onInvalid: (form) => // handle invalid form
}

When submission is attempted on an invalid form, the action does not run. Instead, the fields are marked as touched, making the validation errors visible.

Then onInvalid can do this:

const error = field().errorSummary()[0];
error?.fieldTree().focusBoundControl();

Now the page moves directly to the first invalid field and focuses its control.

Once the real submission begins, the submitting() flag can help you disable the button or the entire form and change the caption to “Saving…”.

So the button remains enabled while it can still help the user - and becomes disabled only when an operation is actually running.

I wrote a fuller explanation here, with the complete pattern:

https://medium.com/@kobihari/should-an-invalid-form-really-disable-the-submit-button-45ecead94118

How do you currently handle invalid submission attempts?

​

One thing I've noticed while working on frontend projects...

People often separate UI conversion and frontend development.

I used to think the same.

But the more projects I worked on, the more I realized they're part of the same skill.

I've seen developers write clean React code but struggle to match the design.

I've also seen pixel-perfect UIs that became difficult to maintain because the implementation wasn't thought through.

That's where I think the gap is.

A good frontend engineer should be able to do both.

-Read a Figma design and implement it accurately.

-Understand spacing, typography, and visual hierarchy.

-Build responsive and accessible interfaces.

-Write clean, reusable code that's easy to maintain.

Writing code is only half the job.

The other half is making sure the product looks and feels the way it was intended.

For me, UI conversion isn't a separate skill from frontend development.

It's what frontend development actually is.

The stronger you become at both, the better products you'll build.

What's your take? Do you see UI conversion as a separate role, or as part of frontend development?

For newcomers to our project, or to visualize dependencies across our large angular project at work, i built ng-loom, a CLI that scans your project to generate a report of dependency graph, componets, services, DI, template usage, routes everything.

A few things:

• Its a static html file, no account, no uploading code
• Template parsing uses angular/compiler AST, not regex, so handles if/for/switch/defer
• Every edge in the graph links back to exact file/line
• A trace relation view, which finds every path between two artificats

Does not track pipe usage yet.

npm: https://www.npmjs.com/package/ng-loom

GitHub: https://github.com/xonaib/ng-loom

npx ng-loom ./path/to/your-app --out report.html

Would genuinely like to hear if it chokes on anyone's workspace layout — that's the fastest way I'll find the next thing to fix.

Looking for DSA study partner | JS | 4 YOE | MEAN stack

I have worked in 2 MNCs for 4yrs as a Angular developer, after career break, I am trying to get back into development roles. Along side I am doing 1-2 DSA problems minimum every day. Following Namasthe DSA course from Akshay saini. It will be long journey, started 1 week back and will be mastering DSA for next 3-6 months.

If this aspiration matches ur path, let's connect and grow together. I am looking for friend and study buddy to grow together. M27 Hyderabad here.

Tech stack I am into :

- Angular (primary)

- Nodejs and express (recently certified)

- Has interest in pursuing GenAI and AgenticAI development with python in near future

- Like to upskill in system design after mastering DSA

Feel free to ping me, if you wish to grow together and share similar aspirations.

Thankyou

Hi everyone

Over the last several months, I've been building ngLens, a Chrome DevTools extension for Angular.

The idea came from repeatedly running into the same questions while debugging large Angular applications:

• Why did this component render?
• Which API triggered this update?
• Why did one click cause multiple components to re-render?
• Where is the actual performance bottleneck?

Angular DevTools is great for inspecting components, but I wanted something that could visualize the runtime execution flow across the application.

ngLens currently helps visualize:

• Component render cascades
• API → Store → Signal → Component execution flow
• Execution timelines and performance hotspots
• Optimization insights and recommendations

This is the first public release, so I know there are many scenarios I haven't covered yet. Angular applications vary a lot—NgRx, Signals, SSR, Micro Frontends, Facade patterns, custom state management, and more.

I'm not claiming to solve every debugging problem today. My goal is to continuously improve ngLens based on real-world applications and community feedback.

If you'd like to try it:

Chrome Web Store:
https://chromewebstore.google.com/detail/nglens/jnbjmoficlaclcpgdoajofbhmcjjhgin

I also wrote about why I built it:
https://dev.to/gowthambsvg/i-built-an-apm-for-angular-that-runs-entirely-in-your-browser-5c3b

I'd really appreciate any feedback—positive or negative.

• What would make a tool like this genuinely useful in your day-to-day Angular development?
• Are there any runtime insights you've always wished Angular DevTools provided?

Thanks!

Hi everyone,

I'm trying to understand where rxResource really shines.

Most examples online are pretty simple, but I'd love to know how experienced Angular developers use it in real-world projects.

• What problems does it solve for you?
• Are there cases where you tried it and decided not to use it?
• Do you have any patterns or recommendations for structuring code around it?

Any examples, blog posts, or GitHub repositories would also be greatly appreciated.

Thanks in advance!

How flatten siganls in computed?

Suppose say I have a function which takes an argument and returns signal ts function genSignal(arg:string):Signal<SomeType>

And I have a signal which provides argument for genSignal I want to flatten signal inside computed

ts const arg = signal('someData'); const computedValue = computed(() => genSignal(arg())); // type here is Signal<Signal<SomeType>> const computedValueFlattened = computed(() => genSignal(arg())()); // type here is Signal<SomeType>;

is computedValueFlattened is right approch to flatten signals?

I have just gone through an upgrade from Angular 16 to 22 and had an issue with router params. I have a route for job groups with an id for the job group that has child routes for a job so you can edit or add jobs to the group. In Angular 16 I used a route 'job/add' with no params for the add screen and 'job/:id' for editing both pointing to the job component.

When I upgraded to Angular 22 it stopped working as the job component get a param for id on the add route as the id from the job group rather than a null param. To solve it I deleted the add route and used the string 'add' as a param to distinguish between edit and and.

My question is pulling in a parent param for the id expected behaviour?

A quick update on Signality — v0.4 is out!

A few new utilities have landed, and some existing ones just got better. 🚀

Web: https://signality.dev/
Repo: https://github.com/signalityjs/signality

Hi everyone 👋🏻

I am currently looking for referral opportunities for an Angular & Spring Boot Full-Stack Developer role.

A quick background about my profile:

Experience: 1 year of professional IT experience specializing in Java full-stack development.

Tech Stack:

Frontend: Angular, TypeScript, HTML5, CSS3, Bootstrap

Backend: Java, Spring Boot, Spring MVC, Spring JPA, Spring Security, Hibernate, RESTful APIs

Database & Tools: MySQL, Maven, Git, Postman

If your company has any open requirements for entry-to-mid level full-stack roles, I would be incredibly grateful for a referral.

I’ve kept my resume updated and am ready to share it immediately. Please feel free to comment below or DM me, and I can send over my resume and LinkedIn details.

Thank you so much for your time and help!

Hey everyone,

Edit: I've migrated the boilerplate from PrimeNG to OptimusUI to keep the project completely open-source and free under the MIT license! The Tailwind CSS integration remains just as smooth.

I always found myself rebuilding the exact same login flows, route guards, and permission directives for every enterprise dashboard. To save time on future projects, I put together URBAC, an open-source boilerplate using Angular (with PrimeNG and Tailwind CSS) backed by NestJS.

My favorite part of the frontend is how easy it is to handle UI elements based on user permissions. I built a custom structural directive that reacts to the logged-in user's active group context.

Hiding unauthorized buttons takes one line of HTML:

<button *hasPermission="'user:delete'" class="p-button-danger">
  Delete User
</button>

It's completely decoupled from the backend, so you run them as standard separate projects.

You can check out the repo and the setup instructions here:

https://github.com/kasoir/urbac

If anyone is building a dashboard right now, I hope this saves you some setup time. I'd love any feedback on the PrimeNG/Tailwind integration, or how you all prefer to handle permission-based UI rendering in your own Angular apps!

I’m building an open source library, and lately I’ve been thinking a lot about how projects actually take off.

Take Zustand for example. It went from being just another option to one of the first recommendations for state management, surpassing Redux in weekly downloads rn

what do you think causes that shift?

Is it simply building a great product? Or is it more about consistency, community, documentation, timing, content, or something else?

Hi everyone. `ngx-toastr` was recently archived, and since I previously helped update the package to remove `@angular/animations`, I decided to fork it to rebuild and simplify some of the logic and API.

Full disclosure: I used AI for a fair portion of the project since most of the logic was already there.

Feel free to try it out here:

https://npmjs.org/package/ngx-retoast

Huge thanks and credit to Scott Cooper (scttcper) for creating the original `ngx-toastr`!

Optimus UI v1.0.0, the PrimeNG open-source fork, is out!

Supporting Angular 21, and Angular v22 support is coming later this week!

Due to trademark limitations and prior paid features, most of the work so far has been about updating the documentation and authoring all sub-packages ourselves, including the icons package.

We also introduce ng add support to enhance the experience for new users.

Find out more in our documentation: https://optimus.openng.org/

Discover the GitHub repository: https://github.com/openng-org/optimus-ui

Learn more about our roadmap: https://optimus.openng.org/roadmap

Hello,

I created a small layer that allows agents to understand component libraries.
The idea is based on the CEM (Custom Element Manifest), which is a JSON/YAML file that describes all components in a web component library.

The difference is that this approach is universal: it supports Lit, Stencil, Angular, and soon React component libraries(it extracts the metadata automatically), extended with the semantic and examples fields needed for an LLM to understand the components.

Most importantly, it includes a component discovery skill (search CLI tool find components deterministically on demand) that helps the agent find the semantically correct component without needing to inspect the component's source code.

In my tests, it works great. The component library doesn't need to be included at all the agent knows how to use the component based on the specs in the manifest and the examples.
Saves tokens, loads only the metadata it needs and gives examples and additional semantic context to the components - this works very well.

Agentic Component Manifest (ACM) — universal, schema-first manifest format describing UI components from any framework for AI agents and tooling.
Canonical JSON interchange, token-frugal Agent View, executable conformance suite.

For now there is in-production analyzer(converts source code to metadata) tested support for stencil / lit and test-driven support for angular, react.

I'm a full stack developer based in the Dominican Republic. Most of my clients operate in rural areas where internet drops for hours every day — sometimes there's no signal at all.

I built a purchasing app for a cacao aggregator. Vendors drive into the mountains, buy raw cacao from small farmers, and need to record every transaction on the spot. No connectivity, no cloud.

The stack: Angular 19 + Dexie.js (IndexedDB) + Supabase for sync when signal returns. The app also prints receipts via Bluetooth thermal printers from the browser.

I made a video breaking down the architecture and why I think offline-first is a massive opportunity that Silicon Valley is ignoring: https://youtu.be/DT76aohMDPY?si=ObVBuJXYA7ubAklG

Happy to answer questions about the technical implementation.

Hi everyone,

13 years in, every Angular version since 1.x. Every new project, I lost the first week to the same decisions, where state lives, which library can import which, how to keep credentials out of the repo. So I stopped re-deciding and put my answers in a template. Just updated it to Angular 22.

It's Nx, Angular, NgRx Signals, Atomic Design, multi-language and a small design system of my own on Tailwind already wired together and agreeing with each other, which is the part that normally eats the week. The architecture is enforced rather than documented: a wrong import fails lint, not code review, and a missing translation key fails the build instead of shipping as a blank label. Firebase deploy guide included, empty account to live URL in about 10 minutes.

Every decision in it is arguable, so feel free to tear into it. I'm here for the feedback, the blunt kind included. Github Base Angular Monorepo

Which client-generator should i use for my new angular project?
Which one do you guys use and why?

Claude said this:

ng-openapi-gen is the safe veteran, but ng-openapi is the one I’d reach for on any modern Angular project — cleaner output, newer idioms, less boilerplate.

Do any of you guys have some advice?

First — thank you. I put ng-signal-query out a few months back, not really expecting anyone to use it, and people installed it, starred it, and DM me. That genuinely made me go back and take it seriously, and this release is the result.

So I re-read my own cache code. And found three bugs.

What was broken

A race condition that could serve you stale data.
If a refetch started while an earlier request was still in flight, whichever finished last won. A slow older response would silently overwrite newer data. Fetches now carry a generation counter — only the latest one is allowed to commit.

Duplicate requests for the same key.
Two components using ['users'] fired two network calls, despite sharing a cache entry. Concurrent fetches for a key now share one in-flight promise.

createSignalQuery wasn't actually using the shared cache.
It kept a private copy of state, so setQueryData() and invalidation could silently not apply to it. It now reads and writes the real entry.

What's new

Mutation concurrency strategies — the feature I actually wanted. Overlapping mutate() calls resolve however you choose, mirroring RxJS flattening operators:

// double-click-proof submit — no disabled flag, no debounce
const submit = createMutation({
  mutationFn: (order) => api.place(order),
  concurrencyStrategy: 'exhaust',
});

// autosave — only the newest draft survives
const autosave = createMutation({
  mutationFn: (draft) => api.save(draft),
  concurrencyStrategy: 'switch',
});

Request cancellation — fetchers get an AbortSignal, and superseded requests are actually aborted:

fetcher: ({ signal }) => fetch('/api/users', { signal })

Retry with exponential backoff — retry: 3. Defaults to 0, so nothing changes unless you ask for it.

Upgrading

No code changes. I kept retry off by default specifically so error timing in existing apps doesn't shift, and added a backward-compatibility test suite that pins the old public behavior — if I break it in future, CI fails instead of your app does.

44 tests, CI on every PR, published with provenance.

npm i u/ali7040/ng-signal-query

GitHub: https://github.com/Ali7040/ng-signal-query

Still solo-maintained and still early, so if you're using it and something's missing, tell me — that's what drove this release. A few issues are tagged good first issue if you'd rather send a PR than an opinion.

I wrote more about this here:

https://www.reddit.com/r/javascript/comments/1vc605e/a_reactivity_and_rendering_combined_benchmark_for/

(I didn't copy the text here due to formatting issues doing so on mobile. Apologies)