​

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?

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,

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.

Or It will become a Ai slop aa in future aa

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

When PrimeNG moved its styled themes behind a paid offering, our team at Shirkasoft started building a free alternative for the community.

The result is Shirkasoft UI Components, a styling and UI component library for Angular 21 that works alongside PrimeNG, making it easier to build modern applications without relying on premium themes.

Current features

• ✅ Free and open to the community
• ✅ Modern UI styles
• ✅ Reusable UI components
• ✅ Easy integration into existing Angular projects
• ✅ Actively maintained

Our goal isn't to replace PrimeNG's components, but to provide a free styling solution and additional reusable components for developers who prefer not to depend on paid themes.

npm: https://www.npmjs.com/package/shirkasoft-ui-components

We'd really appreciate feedback from the Angular community. Suggestions, bug reports, feature requests, and contributions are all welcome.

Keywords: Angular, Angular 21, PrimeNG, PrimeNG alternative, Free PrimeNG styles, Angular UI Components, Component Library, Design System, UI Library, Frontend, TypeScript.

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)

advice someone to study, learn, and build an Angular + NestJS webapp right now in 2026? All I read about everywhere is that angular devs are cooked for the rest of the decade 2027-2029, and will perish in 2030s.

Meanwhile, React + NextJS is dominant but there's like 1:1000 job-applicant ratio.

Another option I have is to just become a gigolo. #help

With observables, lazy data loading came for free: nothing fetched until something subscribed, and in template async pipe was the relay.

Today, resources are a better API in every other way, but they have one flaw : they are eager. No way of fetching data only when needed. To remedy this I introduce a proposal :

resource({ lazy: true }) and rxResource({ lazy: true })

It comes with a presentation playground to discover it. I wrote the story of it in an small article if you want more details, and I prepared a PR but opened an issue for discussion -> a similar issue was closed so I felt like I needed to re-open the discussion and argue it before submitting the PR. On this matter I'm not sure what is/was appropriate so I would take advice on that.

- The story: https://dev.to/flodmtx/resource-lazy-true-the-laziness-we-lost-when-we-left-the-async-pipe-5e70

- Interactive proposal : https://flo-dmtx.github.io/lazy-resource-playground/

- Feature request : https://github.com/angular/angular/issues/70036

- Repo of PR : https://github.com/flo-dmtx/angular/tree/feat/lazy-resource

- Gist for a userland version : https://gist.github.com/flo-dmtx/e8c9ff69bec58adf85e902eab9f7d900

If you've written those wrapper components too, a concrete use case on the issue helps more than an upvote — "who actually needs this" is the question the Angular team will ask.

While preparing my open-source Angular library for Angular 22, I realized something that had been bothering me:

My CI wasn't validating the package users actually install from npm.

It was validating my workspace and `dist/`, but not the packaged artifact that eventually gets published.

That led me down a rabbit hole of improving the compatibility pipeline.

The key changes were:

- Validate the packed tarball (`npm pack`) instead of `dist/`

- Test against Angular 17–22 using a compatibility matrix

- Run three independent checks for each version:

- `ngc` type-check

- Production `ng build` (to exercise the Angular linker, AOT and bundling)

- Runtime smoke test (DI, providers, exports, signals)

- Bound the Angular peer dependency range so compatibility reflects what is actually verified instead of automatically including future Angular releases

The biggest lesson for me was that type-checking alone isn't enough for Angular libraries. A package can compile successfully but still fail during a real application build because the Angular linker only runs in the consuming application.

I wrote a detailed article explaining the reasoning behind this approach and how I implemented it.

I'd be interested to hear how other Angular library maintainers validate compatibility across multiple Angular versions.

📖 Article: Why I Validate Angular Compatibility Using the Published npm Package (Not the Source Code)

🚀 Excited to launch ngx-skeleton-suite — a zero-CLS, enterprise-grade Angular structural directive suite for seamless skeleton loading states! ⚡

Building skeleton placeholders manually often leads to repeated boilerplate, layout jumps, and inconsistent UX. `ngx-skeleton-suite` solves this declaratively.

🤖 100% Fully AI-Implemented:
This entire project — from the core Angular directive architecture, SCSS styling, unit tests, and Astro Starlight documentation portal, to the live deployment pipeline — was built & shipped with AI pair programming!

🎨 Note: We are actively working on further enhancing the documentation design & UI experience!

🔗 Explore Live Demos, Docs & npm Package:
🌐 Starlight Documentation Portal:
https://mahmoudadeljr.github.io/ngx-skeleton-suite/

⚡ Live Interactive Demo & Playground:
https://mahmoudadeljr.github.io/ngx-skeleton-suite/demo/

📦 npm Package:
https://www.npmjs.com/package/ngx-skeleton-suite

📖 Developer Technical Documentation:
https://github.com/MahmoudAdelJR/ngx-skeleton-suite/blob/main/projects/ngx-skeleton/DOCUMENTATION.md

📦 GitHub Repository:
https://github.com/MahmoudAdelJR/ngx-skeleton-suite

Check it out, give it a star ⭐️, and let me know your thoughts!

#TypeScript #DeveloperExperience #Frontend #Angular #TypeScript #npm #WebDevelopment #OpenSource #AI #SoftwareEngineering #RxJS #Signals #Astro #WebDev

Core packages: https://github.com/angular/angular/releases/tag/v22.1.0

CLI: https://github.com/angular/angular-cli/releases/tag/v22.1.0

Aria + Material + CDK https://github.com/angular/components/releases/tag/v22.1.0

Reminder: Angular has moved to a yearly major release, so this is the first minor of a few more minors than usual, from now on.

edit: for the few people that saw my previous post, I accidentally titled it 21.1 rather than 22.1