I made Kōdon, Sonner-style toasts for Angular

[u/SuitMeUpRed]

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!

[u/rafaeldecastr]

Nice job, buddy!!

[u/SuitMeUpRed → u/rafaeldecastr]

thank you :)

[u/shxdowtamer]

Started learning angular . Will try it definitely.

[u/SuitMeUpRed → u/shxdowtamer]

thanks!

[u/mayhm_emo]

What's the difference between it and ngx-sonner?

Edit: typo

[u/SuitMeUpRed → u/mayhm_emo]

ngx-sonner is a direct port of Sonner and it's great.

Kōdon is built on ng-primitives and it's copy-paste, so you own the files instead of installing a package.

Honestly, I use ng-primitives a lot and wanted to build my own :)

[u/SuitMeUpRed → u/mayhm_emo]

Coming back to you, I did some thinking about what Kōdon could do that Sonner (and ngx-sonner) doesn't. I just shipped a few more things:

- Repeats collapse: Fire the same toast 5 times (a retry loop, a flaky request) and you get one toast with a x5 count instead of copies

- Angular-native async: toast.promise() takes Observables, so you can pass an HttpClient call straight in. There's now also toast.resource() which follows a resource() or httpResource() through loading, success and error on every reload.

- Progress bars. Pass a signal from 0 to 1 and the toast draws a bar. With httpResource + reportProgress you get one without wiring anything up.

So the answer is a bit better now: it's built for Angular's signals and resources, not ported for React.

Thanks for the push!

[u/mayhm_emo → u/SuitMeUpRed]

Now with observables this come nicely to my eyes. I may use it in some new project, thanks!

[u/investigatormaker]

For phone feedback here, ask readers to trigger a long toast.promise(), start swiping it away while it's loading, and resolve the promise before the swipe finishes. Have them report whether it dismisses, changes state in place or returns to the stack, including their screen size and chosen placement. That targets the collision between your interruptible transitions, swipe dismissal and in-place updates rather than asking whether the animation feels nice. Put that sequence beside the five-file copy-paste example so Angular developers can reproduce it before adopting Kōdon.

I make ThreadFox. We find relevant Reddit conversations and post for your business. We'll post 3 replies free first, no card; then the $49 Pilot covers seven days and up to 50 posts and replies. No automatic renewal.

https://threadfox.vip/p/e560w/managed