Say your Angular workspace has feature-orders, data-access-orders and shared-ui as separate Nx projects. The feature can use both libraries. Then somebody moves a helper, and data access starts importing from the feature that uses it.

A diagram in the README still looks perfectly fine. Of course it does

One useful part of my ArchUnitTS library is that you can check the Nx project graph against that diagram:

import { nxProjectSlices } from 'archunit';

const diagram = `
@startuml
component [feature-orders]
component [data-access-orders]
component [shared-ui]
[feature-orders] --> [data-access-orders]
[feature-orders] --> [shared-ui]
@enduml`;

const violations = await nxProjectSlices(process.cwd())
  .should()
  .ignoringExternalDependencies()
  .adhereToDiagram(diagram)
  .check();

expect(violations).toEqual([]);

The two intended dependencies pass. Add data-access-orders -> feature-orders and the result identifies that pair as a violation. So a refactor that reverses ownership needs a deliberate architecture change, instead of quietly making the data-access library depend on a feature.

This reads Nx's cached project graph. Generate a fresh graph before running it, and run this from the workspace root. It doesn't inspect Angular's dependency injector or what gets loaded at runtime. The diagram is an allowlist for project dependencies; it doesn't require every arrow to be used.

Free and open source: ArchUnitTS. The example uses the published archunit 2.5.5 package.

I just released ng-prism 22.8. Short recap if you haven't seen it before: ng-prism is a component lab for Angular libraries, a Storybook alternative without story files. You put a `@Showcase` decorator on a component, inputs and types are read at build time, and the components render in the same document as the styleguide, no iframe.

The main thing this time: the canvas can simulate the conditions a component is seen under. The tools menu has a Simulate group with reduced motion, a light or dark color scheme, forced colors (the mode behind the Windows contrast themes) and colour vision deficiencies. It applies to the component, its Overview cells and the CDK overlays it opens, never to the styleguide around it, and it's in the URL, so you can link someone to a component in dark mode.

Because there's no iframe, the browser can't emulate `prefers-color-scheme` for just the component. So ng-prism copies every `@media` rule that tests an emulated feature, scopes the copy to the component and switches the original off there. Specificity and cascade order stay intact, `(prefers-color-scheme: dark) and (min-width: 600px)` still follows the window width, and `matchMedia` answers from the simulation too. If your dark mode hangs on a class instead, the config can name it:

```typescript

export default defineConfig({

colorScheme: { dark: { class: 'dark' } },

});

```

Forced colors is an approximation, since a page can't switch the browser into that mode. The first version was too kind: on a real component library, a toggle, a checkbox and a radio button looked fine in the simulation and were broken in Chromium's real mode. So before the release it got rebuilt against Chromium. There are 114 tests now that render the same fixtures in the real mode and under the simulation and compare the computed colours, and on that library 30 of 30 screenshot pairs came out pixel equal.

Other things in 22.8: showcases take real dates (`value: new Date(2026, 3, 28)` in a variant, with a date field in the controls), a component that sets its own `model()` finally shows up in the Events panel, and the canvas no longer changes with the styleguide's dark or light theme.

• Demo, the alerts under Deuteranopia: https://ng-prism.github.io/ng-prism/demo/?component=AlertComponent&view=overview&vision=deuteranopia

• Demo, the card in dark mode: https://ng-prism.github.io/ng-prism/demo/?component=CardComponent&variant=1&scheme=dark

• Repo: https://github.com/ng-prism/ng-prism

• Release notes with all the details: https://github.com/ng-prism/ng-prism/discussions/87

Question for anyone who checks their components for accessibility: which conditions do you test that this doesn't cover yet? `prefers-contrast`, 200 % zoom, right to left? I'd like to base the next step on what people actually check rather than on my own guesses.

Video voice: elevenlabs.io

An Angular feature can expose a public API and still have other features importing its private services directly. Everything compiles. Then you reorganize that feature and discover how many consumers knew its folder structure.

I maintain ArchUnitTS. Here's a useful boundary you can put in a test: allow imports through the feature's root entry points, reject deep imports from outside, and leave the feature's own internal imports alone.

const rule = projectFiles('tsconfig.json')
  .inPath('src/app/**/*.ts', {
    except: { inPath: 'src/app/orders/**' },
  })
  .shouldNot().dependOnFiles()
  .inFolder('src/app/orders/**', {
    except: { inPath: [
      'src/app/orders/index.ts',
      'src/app/orders/public-api.ts',
    ] },
  });

Here projectFiles is imported from archunit; run await rule.check() inside an async test and assert that the returned list is empty.

So @app/orders/public-api passes, while @app/orders/internal/order.service fails. Those aliases need to resolve in your tsconfig. A nested orders/internal/index.ts stays private too, because the exceptions are exact paths.

You still decide what the public API exports. This checks the import entry point, not Angular's dependency injection or runtime behavior.

Source: https://github.com/LukasNiessen/ArchUnitTS

I’m a fullstack dev, and my frontend stack is React and Next.js (I’m solid in both). Someone is about to recommend me for a role, and I might have an interview in 10 days for a frontend Angular position.

1. Is 10 days enough to pick up the Angular ?

2. If yes, any crash course or full course you’d recommend? Or is it better to build a project by following along and learning as I go?

and if you have any content recommendations, I’d really appreciate it.

Hi,,

Working for a client in BFSI sector.

Need a PDF viewer free for commercial use.

They already use ng2 pdf viewer lib. But it doesn't show digital sig or validate it. I found hacky way to do it but it's a no no practice. Requirement is viewing only.

What's your go to / the industry default for this use case.

Thanks.

Kendo UI added an overlay banner on components (dismissble) on a fully licensed grid (in dev environment)...

`ngx-callout` gives you info, warning, error, success, tip and important callouts in one line of HTML.

Angular component for coloured notice boxes: an icon, a heading, a sub-heading and any content you put inside.

✅ Six types: info, warning, error, success, tip, important
✅ Responsive, dark-mode ready, themeable with CSS variables
✅ Collapsible content, outline and rounded styles
✅ Zero dependencies besides Angular

🔗 Live demo: https://vishaalsharmaa.github.io/ngx-callout/
📦 npm: https://www.npmjs.com/package/ngx-callout
⭐ GitHub: https://github.com/vishaalsharmaa/ngx-callout

Feedback and stars are welcome!

Imagine we have a service which is used to hold some state that is used by multiple components. The state originates from an API call.

What should be initiating the service to get the data in the first place? Is it a method on the service loadData() or similar that returns a void observable and as a side effect sets the state? Where should that call be made from outside of the service? Or should a component load the data and then the state on the service?

If the service loads the data, how do you deal with side effects? E.g. I load the data but now I have some other flow that should occur whenever that data loads. Where should that happen? Should a calling component be calling the service, doing some logic, then doing another call to update the service? Or should the service be handling this?

I’m a student that is working with angular for the first time, I have an assignment that requires implementing an api to our project. My teacher has no information on how to unwrap the response using parse for httpResource. There also is no information about mapping with httpclient & observables.

The documentation that is recommended seems completely irrelevant to my the api I have because my api is returning as an array.

How can I get value from the documentation or where should I look to figure this out. I feel like I’ve been having this problem with everything because the documentation never seems relevant. Even with certain concepts, there is things that I know but I am struggling with knowing what or how I can write things to do the task I need completed.

Any assistance would be appreciated.

Hi r/Angular. Been an Angular since AngularJS and the Angular 2 betas. When ByteDance created Lynx, I really liked it, but it only came with React and Vue. So it's time for an Angular one to exist!

The aim is for it to be ordinary idiomatic Angular, not a subset or deviation, and it follows Angular's major.minor versions:

npm create angular-lynx my-app
cd my-app
ng serve # web preview, plus a QR code for the Lynx Explorer app
ng test
ng build --platform ios # or android: a native app you can open in Xcode / Android Studio

Signals, the router with lazy routes, forms, i18n, DI, ViewContainerRef.createComponent() and Tailwind all work. It idiomatically uses the Angular Router for the page stack, so there are no extra concepts. The one big difference is the templates: you write Lynx's elements (<view>, <text>, <scroll-view>) instead of HTML, and they become real UIView/Android views. The same app also runs in the browser.

How it works: Lynx has two threads, a main thread that owns the native element tree and a background thread. Instead of Angular's DOM renderer, AngularLynx implements Renderer2 on top of Lynx's element API (__CreateElement, __AppendElement, …), and the Angular app runs on the main thread, so updates go straight to the elements without crossing threads. Things that only exist on the background thread (native modules, fetch) are relayed. The build is an Rsbuild plugin that compiles Angular and splits the output into the two bundles Lynx expects, wrapped in Angular CLI builders so angular.json stays the usual one.

There's also a component library, Dolan UI: 54 components (sheets, dialogs, charts, forms…) that a CLI copies into your app, like shadcn/ui.

It's still early days, but it is feature rich, with a lot of examples and showcase apps. Lynx's main-thread JS engine is ES2019-level, so newer built-ins are polyfilled, and some web habits don't carry over (CSS is a subset: no inheritance outside text, no :hover or @media).

MIT licensed. The README has a GIF of the same app on iOS, Android and web. I'd love to hear what breaks, and I'm happy to go into the renderer internals.

GitHub: https://github.com/Blotch-Smart-Frames/AngularLynx
Docs: https://angularlynx.js.org

Demo GIF: https://angularlynx.js.org/demo.gif

Hi everyone.

My name is Alex Inkin, I'm a Google Developer Expert for Angular, original author and current lead developer of Taiga UI (https://taiga-ui.dev / https://github.com/taiga-family/taiga-ui) – a huge components library I worked on for many years together with some great engineers.

I'm a sparse visitor on reddit, but every now and then I see people ask about the library or recommend it to others here. It remains a relatively obscure choice, since it was published when others like Angular Material, ng-zorro or PrimeNG were already established options.

The library is fully open-source Apache 2.0 and is free for commercial use. Recently we added paid Figma license you can buy to help your design team work together with engineering and we started offering Enterprise support (reach out if that's something your company needs here: https://pineoptic.one/products). I figured it's a good time to come here to get to know Angular community on reddit better and answer questions about the library that you might have.

Please ask me what you want to know about it, suggest what deep dive you'd like to read as my next article, what confuses you as a user, what stops you from being one – I'll be happy to answer all I can.

Hi all! I built Angularians (https://angularians.dev), a ranking of everyone who has contributed to the Angular repositories. Not only PRs: issues, helpful comments, reviews and security reports count too.

61,452 contributors from 168 countries so far, updated every night. Look yourself up, filter by country or badge, and grab your card for your README.

Open source (https://github.com/erkamyaman/angularians), built with AnalogJS, and inspired by Nuxters from the Nuxt team.

Feedback welcome, especially on the scoring!

A folder called shared doesn't stay shared if it starts importing code from individual features.

I built ArchUnitTS so rules like that can live in the test suite. For an Angular project, you can select your shared TypeScript files and forbid dependencies on the feature folders. If someone introduces one, the architecture test fails.

The attached clip is a general demo of the library. The repo also has an Angular example with component and service dependency checks, and setup instructions for Jasmine, Jest and Vitest.

The exact rules depend on how you structure the app. You don't need to copy the example's architecture to use it; a single boundary you keep checking in reviews is a reasonable place to start.

Repo: https://github.com/LukasNiessen/ArchUnitTS
Angular example: https://github.com/LukasNiessen/ArchUnitTS/tree/main/examples/angular-example

I wanted toasts in Angular that feel like Sonner. Stacking, expanding on hover, able to be swiped away, and animated with interruptible CSS transitions. I couldn't find a library for it, so I built it on top of ng-primitives' headless toast.

It's copy-paste, not an npm package. You copy the five files into your project and own the code. Visuals and motion live in separate files, so you can restyle it without touching any animation logic.

What it does:

• toast.promise(): one toast that shows a spinner, then turns into success or error in place

• Update a toast by id instead of stacking a new one

• Toasts of any length stack cleanly

• Six placements, and top ones mirror bottom ones

• Swipe to dismiss, or x to pop it

• Reduced motion support, safe areas on phones, works zoneless on Angular 21 and 22

Demo: Kōdon

Code: GitHub

I use it in my own app, and I'd love to know what's missing or what feels off, especially on phones. If it's useful to you, a star on GitHub would help me out a lot.

Thanks!

I'm very fresh in Angular, so my question can be funny to experts.

Hello everybody. Funny question...

my code is like this:

updatePerson(person: PersonModel) {
    this.personService.updatePerson(person).pipe(
        takeUntilDestroyed(this.destroyRef)
    ).subscribe({
        next: () => this.state.update(() => ({ ...this.state(), loading: false,       people: this.people().map(p => p.id === person.id ? person : p) })),
        error: (error) => {
            console.log(error);
            this.setError(error);
        }
    })
}

And question is how to break up this pipe and then subscribe only one element?
The goal is to get a simple array of interfaces (PersonModel is an interface), and then to loop through each object and then call the code from subscribe only for one element?.
You just ask how did I get code that I can't make simpler - it is from the tutorial.
I know more or less how it works, but I can't make it simpler :-)

If I have a

<h1 \[innerHtml\]=“someHtml”></h1>

And that someHtml is a span, how would i style that span without using ::ng-deep as the docs “strongly discourage” its usage?

Has anyone found how to solve this issue here?

  <picture>
    <source [media]="media" [srcset]="`${assetUrl}/background-mobile.webp`" />
    <img ngSrc="background.webp" alt="" priority fill />
  </picture>

The problem is that even on mobile, the desktop image is preloaded regardless, and for the srcset there is no way to provide the assetUrl prefix just like you would normally do via the token:

    {
      provide: IMAGE_LOADER,
      useFactory: () => {
        const assetsUrl = inject(ASSETS_URL);
        return (config: ImageLoaderConfig) => `${assetsUrl}/${config.src}`;
      },
    },

This is a known issue as per the docs

There is a github issue but it seems it doesn't receive attention.

Does anyone have either a workaround or some updates regarding this issue?

Angular 22 introduces Lazy Loading Services, allowing developers to fetch dependencies on demand using the new injectAsync function.

I shared my offline manga reader here a while ago. I’m still working on it, and one thing that kept bothering me was Safari crashing on my iPhone when I tried to import a large MHTML file.

I reworked the importer for v0.6.0. It now reads the file in chunks and decodes images one at a time. I tested both import and export with a 200 MB MHTML file in Safari on my iPhone XR, and both worked.

A few other changes in v0.6.0:

• You can export an entire manga as MHTML, ZIP, or CBZ directly from its details page. Importing it back in Multi mode restores the chapter names and reading order.

• ZIP and CBZ imports now read one archive entry at a time to reduce temporary memory use.

• The reader has a compact toolbar that shows your current chapter and page. You can add or remove a bookmark and open reader settings from there.

• You can blur individual manga cards, reveal them temporarily, or hide blurred entries from the library.

I also adjusted the sidebar and manga details layout for smaller screens, added build info to the sidebar, and updated the translations.

If you’ve run into similar memory issues with large local files on iOS, how did you track them down?

I’d also love to hear what you’d add next, especially if you already use an offline manga or comic reader. What’s one feature you rely on in your current reader that you’d want to see in mine?

I will never monetize this project! I’m building it because I love Angular and want to keep learning. The challenge I set myself was to build a manga reader I’d actually use.

GitHub with demo · Full release notes

I've been building a static checker for Angular codebases and testing every rule against 19 public repos at pinned commits. Three findings I thought were worth sharing, because each one passes the compiler, the tests and review:

1. A translation key that doesn't exist

this.translateService.instant('walletconnect.error')

The bundle only has walletconnect.connection_error, so ngx-translate renders the raw key on the error page. Checking this properly needs the bundles merged deeply per language, because feature bundles redeclare the same namespace.

2. A label that points nowhere

<label for="currentPassword">Current password</label>
<input [(ngModel)]="currentPassword" name="currentPassword" type="password">

The input has no id, so the label is attached to nothing. Clicking it doesn't focus the field, and a screen reader announces the field without a name.

3. A test that checks nothing

it('should replay the last emitted value', () => {
  testScheduler.run(({ cold, expectObservable }) => {});
});

Green on every run, and it has never checked anything.

I've sent fixes upstream for all three.

The tool is ng-checkup (MIT, npx ng-checkup-cli, reads code without running it). But mostly I'm curious: which "passes CI but is broken" pattern do you keep running into in Angular code? I'm looking for the next rules to write.

Hi all. I built Opaline, a small library that turns any string (user ID, email, username) into an avatar. The same seed always gives the same SVG.

The problem. Every app needs an avatar before users upload a photo. Grey silhouettes all look the same, and most generated-avatar libraries either target one framework or cause hydration mismatches when rendered on the server.

What Opaline does

• Seed in, SVG string out. Core has zero dependencies.

• Byte-identical output on server and client, across every 1.x release, enforced by a checksum test. Safe to cache, store or email.

• 4 styles (Aura, Morph, Gradient, Clay) and 3 finishes (flat, soft, gloss)

• Components for React (RSC-safe), Vue 3, Angular (standalone, zoneless), Svelte 5, plus an <opaline-avatar> Web Component

• Pass src and it shows the user's photo, falling back to the generated avatar

• Theme with CSS variables. MIT for code and art.

Example

import { Component } from '@angular/core'
import { OpalineAvatar } from '@inlaylab/opaline-angular'
import { morph } from '@inlaylab/opaline/morph'

@Component({
  selector: 'app-user-avatar',
  imports: [OpalineAvatar],
  template: `
    <op-avatar [seed]="seed" [look]="morph" />
  `,
})
export class UserAvatar {
  protected readonly morph = morph;
  seed = "Opaline";
}

The repo includes SSR sample apps for Next, Nuxt, Angular SSR and SvelteKit. Each checks in a real browser that hydration changes nothing.

Demo: https://inlaylab.github.io/Opaline/ 
Repo: https://github.com/Inlaylab/Opaline

Feedback welcome: which style should come next, and does the API feel right?

Hello Reddit,
I am happy to introduce Blocks to the Angular community.

TL;DR:
Blocks is a free, open-source Angular UI ecosystem (50+ components, glassmorphism materials & a custom lighting engine) designed to bridge TypeScript logic and SCSS styling seamlessly and bring excellent developer experience through easy-to-use APIs. Includes interactive schematics, full a11y/i18n, and interactive docs. Try the live Playground or run this command to add the library and set it up in your project:

ng add @filip.mazev/[email protected]

Note: 1.5.2 is the current alpha version, if you use 'latest' it will download version 1.4.20 which does not have the advanced glass effect.

Longer version:

Building responsive, theme-aware applications often requires a lot of boilerplate to keep TypeScript logic and SCSS styling in sync. Blocks bridges this gap by creating a shared contract between the two, handling the physics of your app so you can focus entirely on building features.

I first soft released version 1 around 8 months ago. Since then I've done a ground-up redesign, core engine updates, and a major expansion across the entire component suite.

• Visual Engine: Supports translucent materials (glassmorphism) and an advanced, custom edge-lighting effects engine.

• 50+ Components: Ranging from foundational primitives such as popovers, accordions, and dividers, to complex form systems fully integrated with modern Angular features such as signal forms.

• Inclusive by Default: Built-in localization (i18n) and accessibility (a11y) support.

Check out the latest release on the brand-new Playground page, where you can test interactive code examples and full documentation for every component, throw Orby around to see the new lighting engine in action, or head over to the Appearance page to explore the new theming capabilities.

Release Notes (v1.5.2 alpha): https://filipmazev.github.io/Blocks/release-notes/1.5.2

To make setup completely seamless, Blocks includes an interactive CLI schematic that scaffolds the entire ecosystem, installs dependencies, and injects your global SCSS configuration with a single command:

ng add @filip.mazev/blocks@latest

What's next?

This release is just a stepping stone. Coming up next for Blocks: a full Figma Design System, AI/Agentic optimization, and expanded complex primitives including tables, date & time pickers, charts, tree views, file uploads and more.

Blocks is 100% free and open-source.
Share your feedback, or dive into the codebase to contribute on GitHub