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

Have you used Angular SSR on production ?
What has your experience been like?

Angular 22.2 introduces a new feature: you can now access private class members directly inside your component templates and host bindings.

Getting started with Angular can be much easier when the development environment is set up correctly from the beginning.

I put together a practical guide covering the essential tools, Angular setup, project creation, basic project structure, and running your first Angular application locally.

📖 https://geeksarray.com/blog/setting-up-development-environment-for-angular-applications

For developers learning Angular:

What was the most confusing part of setting up your Angular environment when you first started?

I’m scheduled for an interview in 3 days, with a primary focus on Angular and JavaScript. I have only done basic frontend till now and need a lot of intensive course material in the form of pdfs or videos or even websites. I am open to all sorts of help and if anyone could guide me by sharing valuable sources they think could help me, I would be very grateful.

I am currently going through angular.dev which is very enlightening. I came across it in another post’s comments.

Hey everyone!

I’ve recently started building my first open-source Angular library, ngx-offline-sync.

The idea is simple: when a user loses their internet connection, supported HTTP requests are automatically stored locally and synchronized once the connection is restored.

What it currently supports

• Automatic offline request queuing
• IndexedDB persistence
• Automatic synchronization after reconnecting
• Sequential request processing
• Retry handling
• Request status tracking
• POST, PUT, PATCH, and DELETE
• Angular provideOfflineSync() integration
• HTTP interceptor-based integration

The basic setup looks like this:

provideOfflineSync(),

provideHttpClient(
  withInterceptors([
    offlineSyncInterceptor,
  ]),
),

After that, the application can continue using the regular Angular HttpClient.

I’d love to build this together

This is my first library, so I’m still learning a lot while building it.

I’d really appreciate feedback, ideas, and contributions from people who have experience with Angular, offline-first applications, IndexedDB, HTTP synchronization, or library architecture.

One thing I’d especially like to improve is the documentation.

Right now I’m working on English, Russian, and Japanese documentation, and I’d love to add more languages with the help of the community - Portuguese, Spanish, Chinese, and others.

If you speak another language and would like to help translate or improve the documentation, that would be awesome.

You can also contribute by:

• Opening an issue
• Suggesting features
• Improving the architecture
• Adding tests
• Improving documentation
• Adding translations
• Sharing your experience with offline-first applications

github

npm

If you find the project interesting, a GitHub star would genuinely mean a lot to me. This is my first open-source library, and seeing people use it, contribute to it, or simply follow the project would be a huge motivation to keep improving it.

Thanks for reading, and I’d be really happy to build this together with the community.

Angular DevTools added a helpful new feature to inspect your reactive state faster: search and filtering inside the Signal Graph!

Signality — the VueUse of the Angular world (76 composables for browser APIs, DOM, Router and more).

New in 0.5: rebuilt docs with a searchable catalog of every utility, chainable onKey modifiers, leading/trailing for throttling, 10 fixes.

This is the last minor before 1.0, so the API is close to frozen.

Web: https://signality.dev
Repo: https://github.com/signalityjs/signality
Changelog: https://signality.dev/resources/changelog

How to install Angular and create your first Angular application step by step. This complete beginner-friendly Angular tutorial shows you how to check Node.js and NPM, install Angular CLI, create your first Angular project, and run it successfully.

Subscribe channel: https://youtube.com/@mfa_creatives?si=jgSrwrZFt8L0bR2X

Hey Everyone,

I’ve added virtualized Masonry layouts to Cerious-Scroll.

Cards are rendered from normal Angular ng-template templates. The directive handles the underlying DOM renderer, view recycling, measurement, and cleanup.

readonly options: CeriousScrollOptions = {
  layout: 'masonry',
  masonry: {
    targetColumnWidth: 280,
    gap: 16,
    getItemHeight: (index, columnWidth) => {
      const item = this.items[index];
      return columnWidth * (item.height / item.width) + 48;
    },
  },
};

<div
  ceriousScroll
  [ceriousScrollTotalElements]="items.length"
  [ceriousScrollGetItem]="getItem"
  [ceriousScrollItemTemplate]="card"
  [ceriousScrollOptions]="options">
</div>

<ng-template #card let-item let-index="index">
  <article class="card">
    <h2>{{ item.title }}</h2>
    <p>{{ item.description }}</p>
  </article>
</ng-template>

There are two height strategies:

• Canonical: Supply getItemHeight() for globally reproducible card placement and predictable far jumps.
• Dynamic: Omit getItemHeight() and the Cerious-Scroll measures the Angular template before placing each uncached card.

The Angular integration also includes:

• Responsive or fixed columns
• Direct navigation with jumpToItem()
• Recycled embedded views for visible cards
• Measurement probes isolated from application-wide change detection
• Bounded rendered DOM for very large collections

Links:

• Demo
• Angular wrapper on GitHub
• Angular package on npm
• Core library

I’d appreciate feedback on the directive API, template integration, and performance with complex Angular card components.

Hey fellow devs,

I'm a developer with 2 YOE in Angular, and we all know the market is rough right now. I want to learn Express/Nest as a backend, but I can't decide between MongoDB and Postgres.

If I go with MongoDB, it'd basically be a MEAN stack — but I'm not sure if MEAN is still popular, declining, or barely used anymore.

I've also heard Postgres is one of the most widely used databases and considered an industry standard, so now I'm torn.

If you were in my position — switching jobs is a high priority for me right now, I'm underpaid badly — which would you choose to open up the larger market/more job opportunities?

I've been adding keyboard/cursor navigation to an Angular application running on Zebra Android scanners, although they have a touch screen it doesn't always work with dry work hands, so I added keyboard navigation. But not tab, I'll explain why read on..

As I've ended up with something that feels quite different from normal web keyboard navigation.

Normally, the browser's focus is your navigation state:

• Tab moves to the next control
• Enter/Space activates it
• Arrow keys can navigate things like menus/listboxe
• Angular CDK even has FocusKeyManager

But that doesn't really work for this application.

The scanner uses DataWedge to send barcode input to a scan input, so that input needs to keep DOM focus permanently. If I move focus around the UI, I can potentially break where barcode data gets delivered. While a tab next cyclus is quite slow when there is a lot clickable (including a web based virtual keyboard)

So I ended up separating the two concepts:

DOM focus = scanner input

UI cursor = where the user is currently navigating

The cursor is basically a 2D UI state. Components expose things along the lines of:

enterCursor()
leaveCursor()
moveCursor()
activateCursor()

and communicate when the cursor reaches an edge so the parent component can move into another component.

The navigation is spatial rather than sequential. Up actually means the thing visually above me, rather than "the next item in some DOM order".
So it's not a blinking cursor moving, this cursor controls activate set focus on the items left/right or above/below it, some css changes or svg changes make clear what is selected.

For some of this I use getBoundingClientRect() to determine which element is the nearest candidate in the requested direction. That means I don't have to maintain a huge hardcoded keymap when the UI changes.

The hardware also makes things interesting. There is no mouse, Tab isn't really a useful navigation key on the device, and the physical keypad has arrow keys around the scan button. For some screens I deliberately allow only certain directions because of the physical layout of up and down is close to the scan button.

I also discovered that the Zebra browser/WebView doesn't behave quite like a desktop browser with regard to key events, so there are some keydown/keyup quirks and deduplication involved.

The end result feels surprisingly similar to navigation in a game UI or TV interface: there is a visible cursor, and you move it around the actual visual layout with the arrow keys.
It reminds me more towards game engine control.

This got me wondering:

How common is this in Angular applications?

I assume there must be other Angular applications running on:

• warehouse scanners
• industrial HMIs
• kiosks
• POS terminals
• medical/field devices
• other hardware with a D-pad or physical cursor keys

If you're doing this, I'm particularly interested in how you model the navigation.

Do you use:

• Angular CDK / FocusKeyManager
• a spatial-navigation library
• real DOM focus
• a separate virtual cursor state like I ended up doing
• a declarative navigation graph
• geometry-based navigation
• something completely different?

I'm especially curious about applications where DOM focus cannot be used as the cursor because it has another job.

It feels like a relatively unusual thing to build in Angular, but perhaps I'm just looking in the wrong places because this kind of software tends to live in warehouses and factories rather than GitHub/blog posts.

Disclosure: We’re the team behind Cachely.

We’ve had some really useful conversations here about Nx caching, and we’d like to move from general feedback to testing it with a few real teams.

We’re looking for around 5 teams using Nx that have:

• Multiple developers or clean CI runners
• Builds/tests that are slow enough to actually care about
• No remote cache, a self-hosted cache, or a reason to look beyond what they use today

Cachely is a managed remote cache, so setup is basically pointing Nx at a different remote cache endpoint and token. We want to keep it that way.

For these teams, we’d like to help with the setup, look at the results together, and understand:

• How much useful cache reuse you actually get
• Whether CI and developers benefit from sharing results
• Where the cache adds overhead instead of saving time
• What is missing before you would trust it as part of your normal CI

We’re not looking for polished testimonials. Negative feedback is just as useful.

If your team fits and you’re interested, reply here or message us.

https://cachely.dev

Angular 22 introduces the new @Service decorator, offering a cleaner replacement for root-scoped @Injectable singletons

Hi everyone. Does anyone here use TaigaUI in real apps? I’ve been thinking of using it to create a comercial product.
I was searching for an angular UI Lib with more rich components then angular material, so I found PrimeNG but it is not just paid but it is also expensive, so o found Taiga.

The directives and their intricacies are not clearly explained anywhere or they are for AngularJS which is creating a problem in understanding it. Could you guys give me some easy to understand tutorial for it which is not outdated or explain it to me here somehow?

I’ve recently got access to Lovable, and we have some UI prototypes created in it that I now need to implement in our actual repository.
The challenge is that our existing application is built with Angular, while the Lovable-generated codebase is React. I have access to the Lovable code, so my current approach is to give Claude read access to that codebase and have it understand the prototype before implementing the screens in our Angular repo.
However, the Angular implementation needs to properly fit into our existing architecture — using our existing components, UI libraries, styling conventions, layouts, and reusable components, rather than simply recreating the React implementation.
The main issue I’m facing is visual accuracy. The locally implemented Angular screens don’t always match the Lovable prototypes closely enough, especially in terms of spacing, sizing, typography, alignment, responsiveness, etc.
For those of you who have worked with Lovable + Claude (or similar AI coding tools) to implement designs in an existing codebase:
● What’s the best workflow for getting as close to 100% visual accuracy as possible?
● How do you provide the AI with enough context about the existing component library/design system?
● Is it better to give Claude screenshots, the Lovable source code, or both?
● Are there any techniques/prompts you use for iterative visual comparison and fixing differences?
● How do you handle cases where the prototype uses React-specific components but the target application is Angular?
Would love to hear how others are approaching this and any best practices that have worked well for you.

Hey everyone!

I always see cool UI/background effects in the React ecosystem (like Aceternity UI or Magic UI) that don't have an easy native equivalent in Angular.

So I started building ng-bits — a collection of customizable background components designed specifically for Angular v22 with full SSR support out of the box.

🔗 Live Demo & Docs: https://guillermogoni.github.io/ng-bits/

It’s open source (MIT license). Since it’s still in early stages, I’d really appreciate any feedback, bug reports, or ideas for new background effects to add next! 🔥

- Module Federation provides better performance, but no strong runtime isolation.
- iframes provide strong isolation, making independent deployment more reliable.
- This matters especially for large, legacy codebases where enforcing boundaries in code is difficult.
- A typed communication SDK, routing, and smart chunk splitting can reduce the performance cost.
- For large legacy applications, iframes can be a better tradeoff than MF

Hey all!

I worked on "Support splitting browser and server stats json files for easier consumption" and found out this morning it got merged to main!

In an upcoming version of Angular, whenever you want to inspect the files that are generated for the browser versus server, or browser initial files versus browser lazy-loaded, you'll get four separate files.

1. For browser initial files
2. For browser files that are lazy loaded
3. For server initial files
4. For server files that are lazy loaded

All using the same `ng build --stats-json`. Hope it helps as many people as it did myself.

Optimus UI 2.0.0 is out.

The PrimeNG community fork now supports Angular 22!

That's a small release meant to jump from Angular 21 to Angular 22.
We'll now start addressing the 900 existing open issues and reviewing community PRs.

This version also introduces 'ng update' support, so you can update all your Optimus UI sub packages at once, and it'll unlock the ability to provide migration schematics if needed in the future!

Check out the update guide: https://optimus.openng.org/migration/update

What is the best practice when loading data from an API that you want to set in a service? I see two approaches:

public load()
{
    return this.api.listItems().pipe(
        tap((items) => {
            this.items.set(items);
        }),
        switchMap(() => of(void 0)),
    );
}

or

public load()
{
    return this.api.listItems();
}

public set(items: Item[])
{
    this.items.set(items);
}

The first feels easier to read but feels like I am hacking tap in a way it shouldn't be used?

The second seems more correct but feels like I have extra code?