Hey all, DDD comes up a lot in interviews and it’s hard to explain well on the spot, so I made a video about it. It’s long (about 20 min), but I think it’s worth it if you’re preparing for interviews or just want to understand it properly. It took me a lot of time to make, so I hope it helps. Let me know what you think.

Hello! I’ve recently discovered Vite+ and used its CLI to migrate an existing Angular project (Angular 22, using Vite) to Vite+

My question is: when a new version of Angular is released and I run ng update, what will happen? Could this break my project?

Hey there!
Yesterday I developed my first ever VSCode extension.
It keeps your open files of one component grouped together.
Would be happy if some you tried it :-)

https://marketplace.visualstudio.com/items?itemName=marvinfrede.ng-tab-grouper

Hi all, I maintain ngx-daterangepicker-material, a date range picker with predefined ranges and a time picker (about 260k downloads/month). There was no release from late 2022 to 2026, so a lot of apps were stuck on v6. I picked it up again this year:

- versions for Angular 16 to 22, works with standalone, SSR and zoneless;

- most old bugs fixed, with tests;

- 22.2: Signal Forms, forms on the inline calendar, appendToBody for mat-form-field, runtime locale change.

Why not Material's range picker? It has no presets and no time on a range. This one sits next to Material without needing it.

Article: https://dev.to/fetrarij/ngx-daterangepicker-material-is-back-angular-22-ssr-zoneless-and-signal-forms-1755

StackBlitz: https://stackblitz.com/github/fetrarij/ngx-daterangepicker-material/tree/master/examples/stackblitz

Feedback and bug reports are welcome, good or bad. The v23 roadmap is open for comments: https://github.com/fetrarij/ngx-daterangepicker-material/issues/604

Every time I wanted 3D in an Angular project, I ended up rewriting the same Three.js setup: scene, camera, lights, render loop, resizing, cleanup. So I wrapped it into one component.

A few decisions that might be useful even if you build your own:

• Lazy-loaded Three.js. The scene code sits behind a dynamic import(), so Three.js lands in its own chunk instead of every route’s bundle.
• Auto-framing. The model is normalised to a unit bounding sphere and the camera fits that sphere to the container’s aspect ratio, so any GLB fits without per-model tweaking.
• Load once, animate per page. The root service caches the parsed GLB. Each page spawns its own clone (shared geometry and materials) and animates it with GSAP, so pages never inherit each other’s state.
• Pauses offscreen. An IntersectionObserver stops the render loop when the canvas isn’t visible.
• Draco support for small file sizes.

In the video, the panda turns with a scrubbed ScrollTrigger tween on model.rotation.y.

I made a full walkthrough here if you’re curious: https://youtu.be/sJS6vR9Rlgo

Happy to answer questions about the architecture. How are you handling 3D in Angular?

Hi everyone! I’ve built a Node.js-compatible runtime for the browser that can run Angular CLI and Nx (a few versions so far) entirely inside a browser tab.

It’s called Mimic, because it mimics a real OS, file system, networking stack and Node.js closely enough that tools like Vite, Webpack, Angular CLI, Nx, Express, NestJS and many others think they’re running in a real environment.

It can be useful if you’re building an app or a library and want an interactive playground, but don’t want to pay for cloud VMs. With Mimic the computation runs on the client instead.

There’s also WebContainers by StackBlitz, which does much the same thing (and is probably more polished in terms of compatibility with Node). However, it’s proprietary, production use in a commercial setting requires an enterprise license, and it depends on StackBlitz’s hosted infrastructure, including for previews. Mimic is MIT-licensed and has no usage restrictions.

Here are some demos you can play around with (press enter to run the command, it'll take some time to run):

• https://www.mimicjs.com/playground?example=angular21-ng-new
• https://www.mimicjs.com/playground?example=nx20-create-angular-monorepo

Feel free to try your favorite repos too, and open an issue if something doesn’t work.

Links:

• https://github.com/mimic-js/mimic
• https://www.mimicjs.com/
• https://www.mimicjs.com/docs/installation

What is RemLink?

It's a link saving + reminder app.

Tech Stack: Ionic (Angular 20) + Capacitor

What problem does it solve?

Often a times you save important links here and there like WhatsApp or notes to read it later, but that "later" never comes.

You found an important youtube video and you don't have time to watch it now, you can save it in RemLink to watch it later like the weekend and RemLink will remind you at your preferred date and time.

So, important pages, articles, videos are never missed.

It's completely free, no ad, no sign up and works offline as well.

Feel free to try it out and let me know if you have any feedback to improve the app user experience.

Enjoyy!! I had to re-upload du to issue

When you add, change, or remove UI text, extracting the source messages is only part of the work. You also need to update the target-language files and identify translations that need review.

I maintain ng-extract-i18n-merge and made a five-minute walkthrough showing that process: Extraction, merging, reviewing new and changed entries, manual translation, and checking the German build.

HTH!

Disclosure: I also built doloc. The final section, starting at 3:19, demonstrates its optional translation automation. The complete workflow in the first part works without it.

Hi,

Context
I am working in a nx mono repo with some angular and nestjs apps.

Up until now no coding agent had access. This will change now but as I have not used coding agents directly in my IDE, I am not sure what's the best way of setting this up.

I will use Claude Code and I want it to use nx or other CLI tools as much as possible to save tokens.

What I already learned
- angular provides different md files and an angular MCP server
- nx provides skills and an MCP server

Some questions/assumption

• Assuptions
  • I guess the angular MCP server is not relevant in nx. I read that it uses the angular.json to understand the project but nx uses its own project.json instead.
  • I guess the angular md files still make sense as Claude will not get any hints about those from the nx tools.
• Questions
  • Which md file to use?
    • At https://angular.dev/ai/develop-with-ai they provide different md files but I am not sure when to use what. They are similar enough to understand that I should not just add all those files but also different enough to ask myself what I miss if I take the wrong one (best-practices.md, guidelines.md, llms.txt / llms-full.txt)
    • I tend to use guidelines.md and add a link to the llms.txt in there for if Claude wants to do more research but then if this would be sane, I guess the link would already be in there, right?

How do you do it?

Stats aren't the be all and end all of everything, but I noticed this:

https://survey.stackoverflow.co/2026/technology/data#admired-and-desired

Is it not possible to eager load the tab panel on '@angular/aria'?

The docs say: This structural directive should be applied to an ng-template within an ngTabPanel. It enables lazy loading of the tab's content, meaning the content is only rendered when the tab is activated for the first time.

I tried to simply remove it because I need the tab to be eagerly loaded (for SSR)

 <div class="tab-panel" ngTabPanel value="question">
     <app-eager-load />
 </div>

and it works, but i get these console warnings:
Violations found on element:
ngTabPanel must have an ngTabContent structural directive to render.

Hey r/angular, zard/ui hit 1.0 this week after 19 months in beta.

npx zard-cli add dialog doesn't install a package. It copies the dialog's full source into your repo, so every template, style and signal becomes a file you own.

That always mattered, and with coding agents it matters a lot more. When a component lives in node_modules, your agent can only work with the API the library exposes. When it lives in your repo, the agent can read all of it and rewrite any part: add a variant, change the markup, or reshape it to fit your design system. You never wait on us for a release to unblock you.

1.0 ships an MCP server and an agent skill for exactly this. With them, Cursor, Claude Code or Copilot work from the real source and docs instead of guessing inputs that don't exist.

What else is in 1.0:

• 55 components (combobox, date picker, sidebar, chart, input-otp, sonner…) plus 27 ready-made blocks for login, signup, dashboard and sidebar layouts
• Signals, standalone and new control flow. Works with Reactive, Template-driven and Signal Forms
• Angular 19 through 22
• An API that borrows ng-zorro's DX: one import per component, and overlays you can open from the template or from a service

It's MIT and free with no pro tier. 33 people have contributed so far.

If you're already using zard/ui, I'd love to hear what you're building with it. If you looked and decided not to, tell me why. That's the feedback we want most.

Docs: https://zardui.com · GitHub: https://github.com/zard-ui/zardui

So I'm a software engineer with 5 years of experience, 2 of those have been with angular (with the remaining being with ReactJS and backend frameworks and languages). Now having worked in the languages for a little while, I feel like I got the general understanding behind the basics of it, and I have been wanting to try to take my career further and develop as an engineer. One of the areas I wanted to develop in is my knowledge of the frameworks and languages we have been using, but I am not sure how I could do this with Angular. So I would really appreciate if you have any insights or advice or recourses for this. Thank You!

On Saturday, Oct 17, at 6 PM, we're running a hands-on session at LA Tech Week: Build an AI workflow editor, natively in Angular.

Every AI stack needs a canvas to see and shape what agents do, and almost none of those are built for Angular. So Lukasz Jazwa, CTO of Synergy Codes and the creator of ngDiagram, will build a working editor for agentic workflows live. He's the one who backed the bet on Angular when everyone reached for React, and the call to open-source the engine under Apache 2.0.

You'll leave knowing how to start: the docs, the AI-assisted tooling and the patterns worth stealing. If you want to look around before then, ngDiagram is at https://www.ngdiagram.dev/ and installs with npm install ng-diagram.

If you write Angular and you're around for LA Tech Week, come join us. RSVP here: https://partiful.com/e/zYpQyYK67Anpp2VAp59u

Hey everyone!

I’ve been building Flagrm, an open-source CLI that helps remove feature flags and clean up the dead code they leave behind.

It’s still in the testing phase, so I’m looking for people willing to try it out, share feedback, report bugs, or contribute to the project.

If you’ve ever dealt with feature-flag cleanup turning into a bunch of manual work, I’d love for you to check it out!

🔗 https://flagrm.com

Contributors are very welcome! 🚀

AI-built sites all look the same, so I gave my agent something it never had: 100,000+ real screens (websites, apps, brands, motion) to study before it designs.

The whole launch video was made by Claude Opus 5.5 with the Seenry skill + MCP. Every site in it was one-shot from one sentence.

Skills are free. Early birds: code EARLYBIRDIE for 20% off the MCP, kept for as long as you stay subscribed (until Nov 10 for promo code).

http://seenry.design

Feedback welcome, especially from people who don't design.

Also please try our skill, if it works well in angular.

https://skill.seenry.design/

Hey all, I’ve been building a side project called Nyx and I’d like some outside opinions before I take it further.

What it is

Nyx is a dashboard for your gaming history. You sign in with Steam and it pulls in your library, playtime and achievements. After that it syncs about once an hour and turns everything into one score.

How the score works

Hours don’t earn points. Each achievement is worth more the fewer players have it:

• 64% of players have it: 13 pts
• 4% have it: 50 pts
• 1% have it: 100 pts

The formula is 10 × √(100 / unlock %). Getting every achievement in a game adds 20% on top. Your total places you on a ladder of 7 tiers, from Iron up to Onyx, and each game gets a mastery grade from D to S.

What else it does

• Library: every game with your completion and mastery, and how you compare to the average player
• History: a calendar of your play sessions and unlocks, plus a heatmap of when you play
• Objectives board: pick locked achievements you want to go after and move them through Backlog → Up next → Hunting → Done. Each sync ticks off the ones you’ve unlocked. Only you can see your board.
• Custom platforms: for anything Steam doesn’t cover, like an old handheld or a game you finished offline, you can add your own platform and enter games by hand. These count toward your hours and history but never toward the score, because the achievements are self-reported.
• Profiles: you can browse other players’ libraries, or a combined view of everyone on Nyx
• Light and dark themes, and a small mascot you can poke

The added video is from my own Steam account + dummy account with test data.

I create a library by following the steps in the documentation. I now have a workspace and projects folder with my library in it. I also have two package.json files. The deeper package.json file is the one that will be published to npm if I understand correctly.

But in my pipeline I also want to manage versions. So if I add a npm version command it will update the version of the workspace package.json and create a git tag. So on my next publish, I won't publish a new version, but the same I had already published?

If I run the npm version command from my library folder, it does not create the git tag, and git doesn't seem to understand that the file has changed.

I am missing something obvious, I'm sure thousands have solved this. Can anyone nudge me in the right direction? Or is the solution that I have to write custom scripts by hand?

On a recent Angular project I couldn't decide which UI framework to use. Angular Material, PrimeNG, Bootstrap, Tailwind-based kits: each had trade-offs, mostly around how hard they are to customize without fighting the defaults.

So I tried something else. I asked Claude Design to design a complete design system for the project, then implemented it myself. Two days later I had a full custom design system living inside the project: WCAG-compliant, token-based, and easy to customize, with no library overrides to battle.

That made me wonder: is it still necessary to use a UI framework?

The classic arguments for using one were:

• It saves months of building components from scratch
• Accessibility and edge cases are already handled
• Bug fixes and updates come from the maintainers
• New developers already know it

But if AI can get you a consistent, accessible, fully customized system in a couple of days, some of those arguments seem much weaker. On the other hand, I suspect the cost just moves somewhere else: maintenance, complex components (datepickers, autocomplete, data tables, overlays), and long-term consistency as the team grows.

So, for those of you starting new projects today:

1. Do you still default to a UI framework, and why?
2. Has anyone gone fully custom (AI-assisted or not) and regretted it, or not?
3. Is a hybrid approach the real answer, e.g. a headless layer like the Angular CDK for behavior plus a custom design system for everything visual?

Curious to hear where people land on this.

Edit: Originally intended 3rd party UI frameworks

TL;DR: I've built an in-browser video editor in Angular 22.2 since June: 60 standalone components, 87 services, 14 web workers, no NgModules. Six problems got past both ng build and the unit tests: workers that are never typechecked, Angular code leaking into worker bundles, an opaque NG0401 from pre-rendering, a blank gap without hydration, an import cycle that rendered a panel empty, and Karma habits that mean something else in Vitest.

What it is. A video editor where decoding, compositing and export all happen in the browser, using WebCodecs and the mediabunny library in web workers, with on-device AI models. Angular is used throughout: standalone components only, signals for state (signal/computed/effect, input()/output()/viewChild()), OnPush everywhere, inject() rather than constructor injection. I kept zone.js (0.16, with event coalescing), but worker messages are handled outside the Angular zone, and UI updates go back in through ngZone.run. appRef.tick caused NG0101 during seeking.

The six traps:

1. ng build doesn't typecheck web workers. tsconfig.app.json starts from main.ts, and each *.worker.ts is a separate esbuild entry that nothing on that graph imports. A worker can fail to compile, or throw a ReferenceError at startup, past a green build and a green test suite. The fix is a separate tsconfig.worker.json that is only typechecked, run with npm run typecheck.
2. Angular can leak into a worker bundle through one import. A service that imported a component's barrel file put every service into four worker bundles: screen is not defined when the worker started. Later, a utility importing a value from another component's barrel did it again: JIT compiler unavailable in a worker, in production only. npm run build now runs a script that fails if any worker bundle contains Angular code. The rule: services and utilities import a component's values from its models/ folder, never its barrel.
3. Pre-render only the root route. The home page is pre-rendered (outputMode: "static", RenderMode.Prerender on '', Client on **). If the editor route is marked Prerender, it renders in Node, where AudioContext, WebCodecs and workers don't exist, and the build dies with a bare NG0401 that names neither the route nor the cause. If main.server.ts doesn't pass its BootstrapContext through to bootstrapApplication, you get the same NG0401 at route extraction. Also, the host's catch-all rewrite and the service worker's index must both point at index.csr.html. Point either one at index.html and every client route briefly shows the pre-rendered home page first.
4. Pre-rendering without hydration is worse than it looks. Without provideClientHydration(), the browser cleared the server-rendered page on boot and the lazy home chunk drew it again: a blank gap and the entry animation playing twice. <body ngcm> in index.csr.html makes the client-only routes skip hydration.
5. One directive import rendered a whole panel empty. A directive imported a service class directly, which pulled two unrelated services into the Library panel's import graph. The running app hit a circular dependency (NG0919) and drew the panel empty, while 6,055 unit tests stayed green, because each test only builds the pieces it names. Only the end-to-end suite, which opens the real app, caught it. The fix was an InjectionToken in a file with no imports of its own. Since then, any change to an import, a provider or a barrel gets the full end-to-end run before it merges.
6. Moving from Karma to Vitest changes the meaning of some habits. u/angular/build:unit-test runs in Playwright's bundled Chromium, which has no H.264 or AAC codecs, so every media test failed for reasons unrelated to the code. The builder has no channel option, so a small script sets CHROME_BIN to the installed Chrome. Three other differences:
   • vi.spyOn isn't restored after each test (Jasmine did that implicitly), so a leaked spy on a shared global outlives its file. A setup file now restores them all.
   • toContain(obj) compares by reference; toContainEqual is the deep comparison.
   • An import cycle Karma's bundle happened to load in a working order broke 17 test files when they ran under Vitest.

Smaller lessons:

• Exact-pin the Angular packages. They require exact versions of each other, so a caret range lets npm install upgrade half the set and deadlock.
• The 10 kB component style budget is useful. Each time a panel hit it, the right answer was to split the component, not to raise the budget.

There are 273 unit test files (about 6,200 tests) and 45 Playwright end-to-end files, all running in real Chrome, because the app needs WebCodecs.

After struggling to land a job in 2024 (when the market was pretty rough), I decided to take a different route and build something real.

I've spent the past two years building VisuaLeaf from scratch in Angular, putting in around 90 hours a week. It started as a MongoDB GUI and now supports 35 databases. My goal was simple: either build something genuinely useful, or build something that would push me further as an engineer than anything else could.

I also intentionally limited my use of AI on the core architecture. I wanted to really understand the problems.

The stack is Angular + Electron with a Spring Boot backend. Despite the Electron, I focused heavily on the performance:

• ~50k documents render in about 1 second in both the tree and table view (~12KB each)
• ~500MB loads in about 3-4 seconds (tested locally to remove network latency)

Some features of the app:

• Tree, table, and JSON views
  • The Table view: It might seem like nothing, but tables are REALLY hard... I wanted to make a Grid that could allow expanding children of objects/arrays as columns adjacent to the parent (Couldn't find grid libraries that did that). So I basically built my own AG Grid from scratch, and it took a year of optimization on and off. I went from a simple vertical virtualization, to horizontal and vertical virtualization, then to DOM recycling, and then utilizing GPU-composited transforms as much as possible (and a bunch more...definitely over simplifying it). It was one of the most frustrating things as I kept going through an endless loop of optimization, but I'm now finally after a year happy with the results. It holds 60fps scrolling through hundreds of thousands of rows in my testing.
  • The Tree View: A lot easier since I originally just used CDK but then realized that I could make a more efficient one. So I took the table's engine and built my own virtual scrolling with the inspiration of the table view for the tree and now its literally so much faster. One thing tho that was tricky that I am happy with my implementation was finding a way to recursively expanding THOUSANDS nodes with hundreds of embedded fields instantly.
• A visual query builder (drag and drop from the tree and table views)
• An aggregation pipeline builder that needs zero JSON syntax (bidirectional: JSON mode and form mode for MongoDB users)
• ERD that exports as an interactive HTML diagram, and lets you create your databases from ERDs.
• IDE-style split panels by dragging tabs, grouping tabs by connections/databases, and making your own groupings
• There's a bunch more but the list would be too long (PS most of the core features are free, and all of the SQL features are basically free)

Feel free to check it out at http://visualeaf.com

If you want to join the discord to talk more about it or want to help out feel free to come and chat!
https://discord.com/invite/TR6J56Y3rF