Hi devs,
Recently, I came across Sileo, a beautifully designed toast/notification system:
Original design: https://sileo.aaryan.design/
I really liked the interaction model and visual behavior, and I started wondering what it would look like as a reusable Angular library.
So I decided to build an Angular adaptation inspired by Sileo’s toast system.
The Goal
This was not just about recreating the UI.
The goal was to:
Implement fully dynamic component rendering
Keep the API clean and scalable
Maintain flexibility for custom content
Follow Angular best practices
Keep it lightweight and easy to integrate
The Result: ngx-dynamic-toast
I built ngx-dynamic-toast, an open-source Angular library inspired by Sileo’s toast concept.
npm: https://www.npmjs.com/package/ngx-dynamic-toast
GitHub: https://www.npmjs.com/package/ngx-dynamic-toast
Technical Challenges
Some of the most interesting challenges during development were:
- Dynamic component injection
Rendering fully dynamic content inside toasts while keeping the API simple and predictable.
- Change detection management
Ensuring performance without triggering unnecessary detection cycles.
- Animation and lifecycle handling
Making sure toasts mount and unmount cleanly, without memory leaks or unexpected behavior.
- API design
Designing something flexible enough for real-world use, but still intuitive for developers.
Credits
This project is inspired by Sileo and its original design concept:
All design credit belongs to the original creators of Sileo.
This is an independent Angular adaptation built specifically for the Angular ecosystem.
Feedback and Contributions
If you work with Angular, I would really appreciate your feedback on:
API design improvements
Architectural suggestions
Performance optimizations
Missing features
Developer experience improvements
Contributions are welcome. Feel free to open an issue or submit a pull request on GitHub.
Top comments (0)