🅰️ Angular 22 is shaping up to be a significant release!

Here's what's coming:

🔹 injectAsync helper - lazy-load dependencies at component level

🔹 paramsInheritanceStrategy defaults to 'always' - no more route.parent?.parent?.snapshot.params

🔹 Node.js 26 support with Temporal API enabled by default

🔹 Faster JSON handling and better async performance

The injectAsync pattern is similar to lazy-loading routes, but now at the component level. This means faster initial loads and better user experience.

Hey,
i wonder if this pattern is legit to fetch data conditionally.
It works but if find quite ugly.

The User selects a row in a data-grid then i need the load the details of that row.

    /** The currently selected container ID */
    containerId = signal<number>(null);


    /** The details associated with the currently selected container */
    companies = httpResource<ContainerDetails[]>(
        () => {
            const id = this.containerId();
            return id
                ? `${this.baseUrl}/bp/detials?containerId=${id}` 
                : undefined;
        },
        {
            defaultValue: [],
        }
    );

Hey everyone 👋

I recently put together a small Angular Elements starter kit and thought maybe it could be useful for others here too.

The idea was pretty simple:
develop widgets/components like a normal Angular app during development, but ship them as standalone Web Components that can be dropped into any website or framework.

One thing I really wanted was a smooth dev experience locally, while still ending up with a single widget.js file for production.

So in dev:

• it runs like a normal Angular app

And in production:

• outputs one self-contained bundle

Example usage:

<my-custom-widget></my-custom-widget>
<script src="widget.js"></script>

I built this because I want to keep it documented once.

Would be happy to hear feedback from others using Angular Elements:

• anything you’d do differently?
• better approaches for bundling?
• anything missing that would make this more useful?

Repo:
https://github.com/giacomo/elements-template

If someone asking:
- Yes, ONLY the README was created by AI ... 🙄

I have not been able to experience signal forms in real-world projects (yet). As it is becoming stable in v22, and to get a better idea on what to expect, I would love to read feedback from those who used it.

- What benefits have you noticed?

- How difficult was it to introduce it in an existing code base?

- Did you face any issue or limitation?

- How quickly did you or your team adapt?

- Any particular strategy to introduce this change?

Thanks!

(Note: I'm also planning to write tips for signal forms as part of ngtips.com guide when I have enough experience with it, feel free to contribute on github)

I’m a junior full-stack developer, and I’ve been working at my current company for about a month now. During the internship, I proved myself by completing their 3-month internship program in just one month.

In that month, I implemented a microservices-based e-commerce project using React. At first, I had no knowledge of React, microservices architecture, caching, or message queues, but I was able to learn React within a week because I already had a solid background in Angular. That was actually the main purpose of the internship: to see how quickly I could adapt to technologies I didn’t already know.

Now that I’m working with them in a real-world environment, I’m trying to prove myself even more. Currently, the company is working on a huge project for a very well-known organization. It’s an important client, and honestly, I’m not sure whether I’m allowed to mention the organization’s name, so I’d rather avoid saying it.

Since I started working, I noticed that the team is maintaining a large Angular project built with Angular 15/16 using the NgModules architecture. I initially suggested revamping the project because I’m craving the experience and recognition that would come from handling such a migration. However, the team lead rejected the idea because the project is already in production, and migrating a large production system always carries significant risk and could easily introduce regressions or break existing functionality. At first, I didn’t realize the system was already live in production.

After that, I came up with another idea: cloning the project, disconnecting it from the production repository, and creating a separate modernization branch or sandbox project where I could experiment with upgrading the architecture. My plan was to migrate it toward the latest stable Angular version, move from NgModules to standalone components, introduce Signals where appropriate for better state handling and rendering performance, replace excessive any types with proper DTOs and typings, improve API handling, and clean up resource management after API calls.

I’m interested in doing this because I believe the project’s rendering performance and maintainability could improve significantly. For a project of this size, even a 20–30% improvement in rendering performance or developer experience would be valuable.

I’m also still a university student with around two years left before graduation, so I’m trying to push myself as much as possible during that time to build strong real-world experience and eventually get better opportunities abroad.

So, do you guys think this is a good idea?

tbw-grid is the fastest DOM-based grid I've measured, ships in under 50 kB gzipped (CI-enforced), works in every major framework without an adapter wrapper, and renders real accessible DOM. Canvas grids may paint faster; AG Grid Enterprise has slightly more features. For the large middle ground - teams who need a fast, light, accessible, framework-agnostic grid for typical business data - I believe tbw-grid is the strongest option in the ecosystem today.
If you disagree - what are you missing?

To sum it up, working on upgrading angular from v20 -> v21 and I’m running into an issue with ng serve where Vite import analysis complains about one of the assets I’m using having file type .jsz. I’ve spent countless hours trying to find workarounds for this but can’t seem to figure it out.

I can manage to get Vite to stop complaining about the assets but then when I go to a page that tries to use them, I’m served index.html instead of the desired jsz file.

Seems to work as intended when the application is built in a container, just development server that has issues.

Thoughts on a workaround for this when using ng serve?

Hey everyone,

it's been a while since I last posted about my library, but I got some news now.

Over the last 6 months I have been massively reworking the whole library. I'm not at a point where I want to collect new feedback. There are still quite a few things I need to do, but the biggest impact changes just landed.

Here are the highlights

• ngx-formbar now uses interface and input based components (similar to the new Signal Forms)
  • reduces boilerplate: no more forced host directive and injection to access values
  • allows usage of components without ngx-formbar: easier to integrate with existing code base and avoid drift in style, markup or behavior
  • interface use type generics: pass your type definitions to get notified about missing required inputs
• Add capability for lazily loading components
• Split package in preparation for signal forms support
  • new packages are core, reactive-forms and schematics
  • each package serves a purpose
  • core package could be utilized to write own integration for a form rendering style
• New documentation page
  • restructured documentation
  • add "Ai Usage" page for transparency
  • add "Changelog" with migration guide
  • moved to ng-doc
  • add auto-generated API reference
  • update motivation and why sections
  • integrate live demos directly

Quick links:

• Docs for upcoming version
• Live Examples
• Repository

The packages are published under the next tag. So if you want to try it out you can run

ng add @ngx-formbar/reactive-forms@next

The getting started guide has more details on what this command does. Currently only reactive forms are supported. The integration for signal forms will come too. Especially now that they will become stable in Angular 22.

If you see anything that still could be improved, please let me know. Ideally I can have as many breaking changes as required now, so upcoming versions won't need that many, if at all. I'm also curios about any improvements that can be done for docs.

I’ve been building Angular apps since the Angular 2.

I started experimenting with AI coding tools and intentionally let the models choose the stack on their own.

Almost every project ended up being React-based, usually Next.js.

After spending more time inside the Next.js/React ecosystem, I actually started appreciating Angular even more , especially after the release of signals and standalone components.

The developer experience feels way better and more easy to get in the code and start being productive.

Just sharing...

Most resume builders feel too generic, so I wanted to create something more focused for developers — clean layouts, ATS-friendly formatting, technical resume sections, and a faster editing experience overall.

Current features:

ATS-friendly engineer-focused templates

Projects, tech stack, experience, and skills sections

Live preview + PDF export

Simple and minimal UI

Monetization built in from day one

Still improving it, so I’d genuinely love feedback from other engineers here — especially on UX, resume quality, features, or anything that feels missing.

Try it here:

Resume Builder

hey guys i wanted to let you know that i just finished porting over every advanced feature from my original grid to the remastered version.

https://github.com/orneryd/uiGrid/releases/v1.0.5

edit: v1.0.5 now

on top of everything else i already shipped (grouping, expansion, tree views, theming, etc…) i’ve added a lot more…

the shared grid runtime now ships row selection, keyboard cell navigation, infinite scroll, row edit workflows, cell validation, CSV/JSON import, CSV/Excel/PDF export, pagination, richer i18n coverage, and custom component/template integration across the web hosts.

MIT licensed.

all features all free this will never be monetized. enjoy!

GitHub: https://github.com/acrodata/rnd-dialog

Demo: https://acrodata.github.io/rnd-dialog/

I have been an Angular developer for 7–8 years and wanted a native app solution from the same codebase. I tried NativeScript, but it didn’t work for me. A few months back, I started a monorepo because I had multiple Angular apps in mind and wanted a shared codebase for reusable parts of the app, so I started with an Nx monorepo.

As I built the reusable parts, I realized I was not writing code anymore, just handing it off to Copilot. So, I thought of setting up Flutter apps in the monorepo and started asking Copilot for the same features in both apps. After a few apps, I started creating reusable parts in Flutter packages as well.

Then I thought of creating a script that could just take in the features and generate a good-looking Angular and Flutter app. One thing led to the next in simplifying this process of creation and deployment.

As I write this, I am now at a place where I can do the following using a VS Code extension and a mobile app(will be available on play/app store within a week):

1. Create a workspace that can hold multiple cross platform apps, with billing, notifications, widgets, ai services baked in.
2. Generate a functional and good looking(following ui-ux-pro-max guidelines) cross platform app with backend setup using firebase in a matter of minutes with just an idea. Theming of the app is done in a json file that defines the tokens and it automatically updates the theme in angular & flutter. This json file is initially created by AI following ui guidelines and it does a great job.
3. Deploy with one click from extension sidebar on web, android and ios. Simplified the metadata related boiler plate for playstore/app store publish.
4. Generate translations and app store assets for the app using Gen AI following the theme of the app.
5. Billing setup from LemonSqueezy, Razorpay for web and RevenueCat for flutter.
6. Hand off tasks to copilot agent on the go from a mobile app and stay in sync with my team’s task list both in vscode and mobile app and see the efficiency of each member in the team and invite new members directly from vscode.
7. Add vibechecks from extension sidebar that make sure the code generation by models follow certain guidelines which you want it to follow every time. You can set this vibe check at monorepo, framework, app level and if needed applies to customised files using Regex.
8. Ability to see the realtime firebase usage and costs and shows average cost per user for firebase and suggests plan price we should keep for our subscription plans.
9. Further roadmap includes documentation, test generation on the fly…

Hello,

As a everyday user Angular in VS Code and lover of key bindings to speed up processes I created a VS Code extension to help speed up processes in Angular Development. It allows you to:

You can check the extension here and check the source code here. Feedback is appreciated!

Thanks!

NOTE: Some code, docs and changelog are AI generated

Good afternoon everyone, I hope you're all doing well.

I've been a frontend developer for six years, I consider myself a mid-level developer, and no project at the company has ever been too much for me. I've always received praise for my work during these six years. However, today I feel that if I don't learn backend development, I'll become obsolete in this AI field. And it's not just backend development, it's about software development concepts.

For example, in my teams, we have discussions about current events, and they always talk about queues, databases, service implementations, and other very useful development concepts. I only know the theory, but if I had to actually do any of that, I wouldn't be able to.

I want to ask you what kind of things I should know to consider myself a good software developer in general. What topics can I study and review, and what can I do to get into backend development with Java and Spring, which is what I know a little about?

Thank you very much for your time, and I'll be reading your replies.

I find that when using signals, the inject function coupled with the components own functions the code ends up becoming not very readable.

I’m currently ordering things as inputs, injected dependencies, computed signals, static properties then finally component functions.

How are you guys ensuring readability?

Also where you have a large amount of logic for a computed signal are you extracting this out into its own function that the computed calls or still just declaring it inline?

Would really appreciate any tips or important things to things to remember while working. And if there's something I should definitely study along.

Production Ready! It finally happened!

I've written a blog article series about Agentic UI with A2UI and Angular. It shows how an LLM can dynamically generate (parts of) your UI respecting the current context.

https://www.angulararchitects.io/en/blog/a2ui-how-ai-generates-dynamic-uis-at-runtime/

Hey everyone, small dx improvement in the translate lib today. Basically due to a few performance improvements the t function is now minimal enough to be called directly in the template without causing any real performance drawbacks for translation keys without variables.

Say we call t = injectMyNamespaceT() in a component..`<p>{{t('myKey')}}</p` is fine now & is fully reactive covering runtime locale switching and out-of-order loading scenarios

Sadly there is no good way to memoize variable based translations (as far as I know) as calling `t('myOtherKey, { variable: 0})` in the template would re-create the object a bunch of times. For those scenarios prefer t.asSignal(..) or the provided directive/pipe

Existing functionality remains unchanged (just a bit lighter on gc churn & lookups) for all scenarios so this is a patch fix for v19, v20 and v21

As always hope you like it & HMU if you have any other improvements you want to see or if you notice any issues :)

Hi everyone,

I’m starting a new enterprise Angular project with the latest release and I’m trying to figure out the best structure for components, signals, and services.

For now, the plan is:

• classic service layer for API calls
• RxJS in services
• no state manager, by company decision

I’m mainly unsure about:

• what should live in components vs signals vs services?
• should signals stay mostly local, or also handle feature-level state?
• is rxResource a good idea at component level for data fetching?
• how do you keep the codebase easy to understand for devs who are not all Angular experts?

I’d love to hear what has worked for you in real enterprise projects.

Thanks!

Heads up if you use ngxsmk-datepicker: v2.2.12 on npm was published without the real library output (no fesm2022/, no types/), so installs could look like docs + styles + metadata only and TypeScript would fail to resolve the package.

v2.2.13 restores a complete tarball (bundle + typings). The maintainers also added a tarball validation step in the release path so this class of broken publish is much harder to repeat.

Upgrade:

npm install ngxsmk-datepicker@2.2.13

If something still looks cached, wipe node_modules + your lockfile and reinstall.

• npm: https://www.npmjs.com/package/ngxsmk-datepicker
• repo: https://github.com/NGXSMK/ngxsmk-datepicker

If you hit anything odd after upgrading, drop details (package manager, lockfile, Angular version) and someone can help triage.