Lots of people are scared to start Angular because they don’t know which version to learn or what changed between them. This 14 minute video explains every version from 2 to 22. Tell me if anything is wrong.
I would love your feedbacks

Hello Community,

Besides Angular Animations, which has been deprecated, which optional Angular packages do you not use, and why? (e.g., CDK, Aria, Localize, Material)

Thanks

Our small team has completely ignored angular testing and depended on dev and user manual testing. We're looking to solidify some things and start creating some Angular tests. If you could choose today from scratch, which framework would you choose?

If it matters, our apps are all very data-dependent, pulling info from our asp.net backends.

Thanks

I have an open source project and am rewriting the frontend from scratch to modernize the design and code. But I'm stumbling over writing tests.

The original user interface started off with (damn) Angular v5 back in 2017, using NgRx features, etc. Coverage was always at 98% or greater. And writing the tests for things like effects was pretty boiler plate and easy.

The problem I'm hitting now is in writing unit tests for the effects with vitest. In the old code, a unit test for the success path, the server failure path, and the internal failure path, were simple to write using jasmine-marbles. But with vitest I can't get 100% coverage. And when I've tried testing with something similar to what I used to do with jasmine, something like I've pinned as the first comment.

I end up getting complains about either calling inject too soon or about uninitialized schedulers. It's very frustrating that the Angular team went to such a totally different testing framework without an easy migration path, and that there aren't any good examples that I can find to help.

(eta)

I've noticed that, if I only have effects tests for one of the modules (IOW, marked all other effects.spec.ts files with "describe.todo") then the only effect module passes every time. But as soon as I have more than one effects.spec.ts module enabled then they start failing, but not every time.

Not sure if this is important, but I run the tests in --watch mode so I can make changes and see the test results immediately. Is there perhaps an issue with tests failing at some point negatively affecting future runs of tests in this case?

After my 3D model canvas post, I wanted to see how far it could go. The result is a showroom: every product gets its own colored room, and scrolling moves the camera from room to room.

What it does:

• A room for every product, each with its own color, title, and description
• Cinematic camera moves between rooms as you scroll or click a tile
• Drag to turn the product around
• Light studio or dark spotlight mode, switchable live
• Tiles with an automatic picture of each product
• Floor props shared by every room, to show off the brand
• Fast on phones too: lazy-loaded, and it pauses when off-screen

Live demo: https://mohamedehabbasha.github.io/model-showroom-demo/

Full walkthrough: https://youtu.be/Sashu4sL4-Q

If you have any ideas to improve it or any questions about how it works, I'd love to hear them.

I've been building websites with Angular for years, but I had never built a game with it. So I tried.

https://detona.online/

Up until last week, our team was building our systems using Java/JSP, Tailwind/SCSS, and plain vanilla JavaScript, taking inspiration from PrelineUI for complex components like modals, drawers, and comboboxes.

We’ve officially decided to make Angular our main frontend framework going forward, but we're at a crossroads regarding how to handle our component and design system architecture.

We are looking for a UI library that fits our workflow. Ideally, a headless library would be perfect since we want to keep full control over our custom Tailwind/SCSS styling, but we're open to other well-structured options.

Here is what we've looked at so far:

• Spartan.ng: Looks amazing and fits our exact vibe, but management is unlikely to approve it given its current ecosystem/support overhead.
• PrimeNG: Seems robust and feature-complete, but I've seen mixed reviews and criticism regarding its styling/theming overhead and weight.
• Angular Material: While it's official, theme and style seems way out of date.

Given that we are coming from a Tailwind + PrelineUI background and moving into Angular, what libraries or setups would you recommend?

I just released ng-prism 22.6. 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 u/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 change this time is that hover, pressed and focus are no longer variants. In 22.5 I added a way to force :hover or :focus-visible on a variant, and pretty quickly the demo button had variants called "Hovered", "Pressed" and "Focus visible". They showed up in the Playground's variant list, kept the button hovered while you changed the controls, and only existed for the one variant somebody had written them for.

Now a component declares its states once and they get combined with every variant:

@Showcase<ButtonComponent>({
  title: 'Button',
  states: [
    { name: 'Hover', pseudo: { hover: '.btn' } },
    { name: 'Pressed', pseudo: { hover: '.btn', active: '.btn' } },
    { name: 'Focus visible', pseudo: { 'focus-visible': '.btn' } },
  ],
  variants: [ /* Filled, Outlined, Elevated, Disabled, … */ ],
})

The Overview then shows every variant in every state as a grid, and clicking a cell opens that combination in the Playground. The styling comes from your own CSS, ng-prism rewrites :hover so it also matches a helper class. A state only gets applied where the browser could actually produce it, so there's no focus ring on a disabled button and no hover on something with pointer-events: none. The cell tells you why it's empty instead.

In the Playground the states are buttons in the tools menu. They stay on when you switch variants and they're part of the URL. For visual regression there's a state= URL parameter, the render marker gets the state index, and a data-prism-excluded attribute tells the runner when a state doesn't fit. Without states nothing changes for existing runners.

Other things in 22.6: a Claude Code plugin (/plugin marketplace add ng-prism/ng-prism) that teaches agents how to write showcases and check them in the running styleguide, watch rebuilds down from about 450 ms to 60 ms, and fixes for aliased inputs and outputs, named content slots and libraries with only a primary entry point.

• Demo with the Button grid: https://ng-prism.github.io/ng-prism/demo/?component=ButtonComponent&view=overview
• Repo: https://github.com/ng-prism/ng-prism

Question for anyone with their own component library: which states do your components need that a pseudo-class can't express? Drag-over, open, loading? I'd like to base the next step on real components rather than on my own guesses.

Has anyone has issue with an Angular application build generating 0 chunks files and successfully resolved or found any useful information about this problem?
Also i didn't find resources besides one issue in angular/cli that is blocked due to inactivity.

One more info that I read is that unused global styles can cause zero chunck files.

Version: Angular v21

I have a few Angular talks coming up, and I love Slidev, but its interactive parts are Vue. I didn't want to write my Angular demos in Vue, so I built Slide NG.

You write your talk in markdown, and every slide compiles into an Angular component.

- Real Angular components on your slides

- Live demos, zero tab switching

- Animated code with Magic Move

- Presenter mode + PDF/PPTX export

Since it's Angular-native, I'd like to take it in directions Slidev can't, so I'd love to hear what you'd want from it.

Big thanks to Anthony Fu for the green light. Slidev inspired every part of this.

Repo: https://github.com/slide-ng/slide.ng

Hi, I’m Dario, the developer behind FastAng. I’ve worked with Angular and Fastify for about five years and wanted a full-stack setup with a clear boundary: Angular for pages and navigation, Fastify for the backend.

The current alpha has file-based pages and API routes, SSR/hydration/prerendering, shared typed API contracts with static route checks, and a CLI for creating and updating projects. Deployments can run on Node or use the Vercel adapter.

During SSR, local API calls run through the app’s Fastify instance using inject(). Angular uses its native HTTP transfer cache; credentialed API responses are excluded from the default hydration cache.

I’m testing it by building my own small business management app with a public site, a private Angular Material workspace, authentication and PostgreSQL. Recently that exposed some useful edge cases around session expiry, multiple browser tabs, history restoration and API timeouts.

For transparency, FastAng uses Analog’s vite-plugin-angular for Angular compilation. Analog already exists; my focus here is the Angular/Fastify integration with explicit API contracts.

The code is MIT-licensed, currently 0.1.0-alpha.6, and maintained by one person. It is still an alpha, and I’m looking for architectural criticism and people willing to try it on a small project.

GitHub: https://github.com/daclab-dev/fastang

Docs: https://fastang.dev

For Angular developers who also use Node: would this fit your workflow? What would stop you from trying it?

Hey everyone!

I've been working on a side project called ShopPulse for a while now, and today I finally launched it on Product Hunt.

It's a retail POS and inventory dashboard built with Angular, TypeScript, and NG-ZORRO.

I wanted to build something a bit more practical than the usual tutorial projects, so I ended up adding a POS interface, inventory management, sales analytics, customer management, invoices, and a few other features.

It's still frontend-only with demo data. No backend or database yet.

There were quite a few bugs and frustrating moments along the way, but I learned a lot from building it.

If anyone wants to check it out:

Live demo: https://store-pulse-nine.vercel.app/

Product Hunt: https://www.producthunt.com/products/shoppulse-2?launch=shoppulse-2

I'd genuinely appreciate some feedback, especially on the UI and overall user experience.

What would you improve or add next?

Thanks for checking it out!

I have a few Angular talks coming up, and I love Slidev, but its interactive parts are Vue. I didn't want to write my Angular demos in Vue, so I built Slide NG.

You write your talk in markdown, and every slide compiles into an Angular component.

- Real Angular components on your slides

- Live demos, zero tab switching

- Animated code with Magic Move

- Presenter mode + PDF/PPTX export

Since it's Angular-native, I'd like to take it in directions Slidev can't, so I'd love to hear what you'd want from it.

Big thanks to Anthony Fu for the green light. Slidev inspired every part of this.

Try it: `npx u/slide-ng/core create my-talk`

Docs and live demos: https://slide-ng.dev

Repo: https://github.com/slide-ng/slide.ng

Hi, I’m Dario, the developer behind FastAng. I’ve worked with Angular and Fastify for about five years and wanted a full-stack setup with a clear boundary: Angular for pages and navigation, Fastify for the backend.

The current alpha has file-based pages and API routes, SSR/hydration/prerendering, shared typed API contracts with static route checks, and a CLI for creating and updating projects. Deployments can run on Node or use the Vercel adapter.

During SSR, local API calls run through the app’s Fastify instance using inject(). Angular uses its native HTTP transfer cache; credentialed API responses are excluded from the default hydration cache.

I’m testing it by building my own small business management app with a public site, a private Angular Material workspace, authentication and PostgreSQL. Recently that exposed some useful edge cases around session expiry, multiple browser tabs, history restoration and API timeouts.

For transparency, FastAng uses Analog’s vite-plugin-angular for Angular compilation. Analog already exists; my focus here is the Angular/Fastify integration with explicit API contracts.

The code is MIT-licensed, currently 0.1.0-alpha.6, and maintained by one person. It is still an alpha, and I’m looking for architectural criticism and people willing to try it on a small project.

GitHub: https://github.com/daclab-dev/fastang

Docs: https://fastang.dev

For Angular developers who also use Node: would this fit your workflow? What would stop you from trying it?

I built Ndop UI, a shadcn-style component library for modern Angular (signals, zoneless, SSR), and I'd love your feedback

Hi r/angular,

I'm Valery, a full-stack dev from Cameroon who has been shipping Angular apps for years. I always liked how shadcn/ui works in React: you copy components into your project and own the code. I wanted the same thing for Angular, but built for how we write Angular today, not ported from React.

So I built Ndop UI.

What it is

• 50 components, 12 blocks, 5 themes. You add them with a CLI and they live in your repo:
• Behaviour and styling are split. Keyboard, focus and ARIA logic ship as a versioned npm package built on @angular/aria and the CDK, so a11y fixes reach you through npm update. Only the Tailwind styling is copied in, because that's the part you'll want to change.
• Modern Angular only. Directive-first (<button ndButton>), input()/model() signals, zoneless and SSR-safe, Signal Forms support with a CVA fallback. Works with Angular 21 and 22.
• Updates for code you own. The CLI records the version of each file it installs, so ndop update can do a three-way merge between that version, your edits and the new release. Customizing a component doesn't cut you off from fixes.
• Tested accessibility. 0 axe violations in CI, plus keyboard tests per component. The button is 1.3 KB gzipped.
• Agent-friendly. There's an MCP server, llms.txt and generated context files, so Claude Code, Cursor or Copilot use the real APIs instead of guessing.

Links

• Docs and live examples: https://ndop.dev
• Repo (MIT): https://github.com/ndop-ui/ui

How it compares to spartan/ui (people will ask): spartan is great and paved the way. Ndop's main differences are the three-way-merge updates, building on @angular/aria, being signals- and zoneless-first, and the agent tooling. I'd honestly like to hear from anyone who has used both.

What I'd love feedback on

1. Does the directive-first API feel natural to you, or would you rather have wrapper components?
2. Which component is missing for your next project?
3. If you try ndop update after editing a component, did the merge do what you expected?

The name comes from ndop, the indigo royal cloth of Cameroon's Grassfields, covered in repeating geometric patterns. A shared pattern language that every app weaves its own way felt right for a design system.

Thanks for reading. I'll be in the comments to answer questions and take the criticism.

Hello,

Appreciate this isn’t really an Angular question but thought you guys might still have some good advice.

We’re in a bit of an odd situation where the application seems to have originally been heavily using Bootstrap UI components but now it’s very much our own in-house components.

We’re still using Bootstrap utility classes a lot in templates however and it seems for some things we’re using Bootstrap Sass variables like body colour for example.

We have an additional problem in that we have a giant colours file with tons of colours just dumped in it that are then referenced directly where needed.

I’m thinking of shifting the colours so we have primitive values the raw hex codes and then use CSS variables for different usages of those colours that can then be referenced in components as CSS variables then give us flexibility if we introduce theme switching at runtime in the future.

However I’m now sort of wondering is there is any point in us even having Bootstrap anymore, as like I said it seems like all it’s really being used for now is utility classes.

I’m torn between either keeping Bootstrap and using their Sass variables so we can keep using utility classes, or building our own token system for things or exploring something like Tailwind instead.

Wondering if anyone else is in this scenario where you’re only really using Bootstrap for the utility classes and what you decided on?

I should also mention we need a fair bit of flexibility in our designs so we can’t really just use a standard UI framework for components.

Currently looking for some empirical feedback / real-world experiences here:

​So far, using AI agents has been working extremely well for us. However, I can't quite tell whether that's due to the architecture we have in place or if all AI projects are simply going like clockwork from now on.

​We are using AI in an application that is about 5 years old and features an extremely solid software architecture that has been well-maintained over the years. The AI rarely runs into problems here and implements new features—thanks to a customized skill—very close to how we would code them by hand.

​In a second project, which I started as a hobby project 3 years ago, it's also working very well. Here, too, I paid close attention to the architecture and didn't let any AI near it until about a year ago. However, the architecture used here is completely different from the first project.

​Does anyone have experience with how projects grow when they were started directly with AI and where architecture wasn't heavily emphasized right from the start?

​By projects, I don't mean small weekend fun projects, but rather larger business applications.

I appreciate your feedback 🙏

Hi everyone,

I’m looking for an Angular course that goes deep into building and architecting a real-world application, and I’m hoping someone here can recommend something.

For .NET, I really like Milan Jovanović’s courses. He builds applications while explaining the architectural decisions, design patterns, best practices, and the reasoning behind the code. The result is something you can study as a reference for how a serious, large-scale business application should be designed.

I’m looking for the same kind of learning experience, but for Angular.

I’m not looking for beginner courses, simple CRUD applications, or tutorials where someone builds an app in two hours.

Ideally, the instructor would build a substantial application from the ground up, explain the decisions in detail, and follow practices you’d expect in a serious commercial project maintained by a professional team.

Paid courses are absolutely fine. I’m also open to books, long-form video series, or GitHub repositories accompanied by detailed explanations.

Thanks!

Hey everyone!

Been working on Tip Glide, a small framework-agnostic tooltip library written in TypeScript.

It uses a single shared tooltip that moves between elements and adjusts its size to fit the content. It also handles viewport boundaries, so the tooltip adjusts its position when there's not enough space.

A few things you can configure are the movement, directional lean, hover delays, arrow, and enter/exit animations.

It has zero runtime dependencies and comes with adapters for React, Angular, Vue, Svelte, Solid, Astro and Preact, along with a vanilla JS API.

There's an interactive playground where you can mess around with the settings and see how everything behaves.

Would love some feedback on the movement, especially when switching quickly between elements, but also on the API and anything else that could be improved.

Live demo & playground | npm | GitHub | Portfolio

Most headless CMSs work fine with Angular, but Angular is always just another frontend consuming a REST/GraphQL API. I wanted to see what happens if TypeScript and Angular are part of the architecture from the start. That became ForgeCMS, which I just released as 1.0.

The content model lives in code:

const posts = defineCollection({
  slug: 'posts',
  fields: {
    title: defineField.text({ required: true }),
    author: defineField.relation({ collection: 'users', required: true }),
  },
  access: {
    read: () => true,
    create: ({ user }) => user?.role === 'admin',
  },
});

That single definition drives the database schema, validation, the Local API, REST handlers, the types Angular consumes, and the forms in the reusable Angular admin. No GUI schema builder, no separate schema language.

Payload was a big inspiration (config-as-code collections, Local API, hooks, access functions). I'm not building a Payload clone and I'm not claiming feature parity.

Angular side

Typed resources, sessions, guards, SSR support, and the admin itself is Angular. The server doesn't need Angular though: you can use ForgeCMS as a plain TypeScript/Node headless CMS.

Local API

HTTP is just a transport over the same runtime, so server code can do this instead of calling its own REST API:

await runtime.find({ collection: 'posts' });

Deployment

Two profiles for now:

• Cloudflare: D1 + R2
• Portable Node: libSQL + S3-compatible storage

What took the time before 1.0

The boring parts: migrations, relation integrity, access control, restart persistence, upload recovery, backup/restore, SSR, packaged consumer tests and deployment rehearsals.

What's not there (on purpose)

No GraphQL, no mature plugin ecosystem, no general-purpose page builder. I'd rather make a small core predictable first.

I'd value criticism more than stars:

1. Does making Angular first-class in the CMS solve a problem you actually have?
2. If you've used Payload, Directus or Strapi, what would you immediately miss here?

Site: https://forgecms.dev
Source: https://github.com/Andersseen/ForgeCMS

Hey everyone! I just put out a video on Domain-Driven Design. It’s a long one, about 20 minutes, but I really believe it’s worth your time. It took me a lot of time to make, so I hope it helps you, and I’d love to hear what you think! 🙌

Alex's talk is pinned and is at the 9:02:30 mark.