r/angular • • 22d ago

An update on Angular’s TypeScript 7-powered Compiler

Thumbnail
medium.com
102 Upvotes

r/angular • • 23d ago

What's new in Angular 22.2?

Thumbnail blog.ninja-squad.com
52 Upvotes

🛡️ `@boundary` for fallback UIs

🛣️ Router resources, loaded in parallel

🔎 Change detection data in DevTools

⚡ Faster CLI builds


r/angular • • 3h ago

Experimenting with animated tooltips in TypeScript

4 Upvotes

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


r/angular • • 19h ago

Domain-Driven Design (DDD) — The Complete Guide | Visually Explained

Thumbnail
youtu.be
9 Upvotes

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! 🙌


r/angular • • 1d ago

ViteConf 2026 - Angular Compilation: Past and Future

Thumbnail
youtu.be
24 Upvotes

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


r/angular • • 19h ago

DDD: I Know This Comes Up a Lot in Interviews

Thumbnail
youtube.com
0 Upvotes

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.


r/angular • • 2d ago

Ng-News 26/22: TypeScript 7.1, Angular Native and Polymorpheus

Thumbnail
youtube.com
50 Upvotes

r/angular • • 3d ago

Claude helped me finally move our Angular project I've been maintaining since 2020 to modern signal based approach

14 Upvotes

r/angular • • 3d ago

ngx-daterangepicker-material is maintained again: Angular 22, SSR, zoneless, Signal Forms

5 Upvotes

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


r/angular • • 2d ago

Modern Angular & Vite+

3 Upvotes

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?


r/angular • • 3d ago

VSCode Angular Tab Group

8 Upvotes

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


r/angular • • 2d ago

I built a reusable Three.js component for Angular: drop in a GLB, animate it with GSAP

0 Upvotes

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?


r/angular • • 3d ago

I built a Node.js-compatible runtime that runs Angular CLI and Nx in a browser tab

Thumbnail
gallery
6 Upvotes

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):

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

Links:


r/angular • • 2d ago

RemLink got an update

0 Upvotes

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.


r/angular • • 4d ago

Layered vs Hexagonal vs Onion vs Clean Architecture | Visually Explained

Thumbnail
youtube.com
6 Upvotes

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


r/angular • • 4d ago

Keeping Angular i18n files in sync when source text changes

Thumbnail
youtu.be
2 Upvotes

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.


r/angular • • 4d ago

Setup Coding Agents in VSC for angular/NX

0 Upvotes

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?


r/angular • • 5d ago

Stackoverflow Survey Snippet

Post image
1 Upvotes

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


r/angular • • 6d ago

Angular ARIA tabs eager load

1 Upvotes

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.


r/angular • • 7d ago

zard/ui 1.0: shadcn/ui for Angular. You get every line of source, so your agent can change anything

26 Upvotes

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


r/angular • • 8d ago

Advanced Angular concepts for non-beginners

19 Upvotes

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!


r/angular • • 7d ago

LA Tech Week, Sat Oct 17 at 6 PM: live build of an agentic workflow editor in Angular with ngDiagram

2 Upvotes

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


r/angular • • 7d ago

Flagrm - Remove feature flags with your AI coding agent.

0 Upvotes

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! 🚀


r/angular • • 7d ago

built Seenry, a design library my AI coding agent studies before it builds (the launch video was made with it too)

0 Upvotes

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/


r/angular • • 8d ago

I built a free Steam achievement tracker that scores each achievement by how rare it is, I call it Nyx, but not sure on the name. Looking for honest feedback.

8 Upvotes

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.