Ng-fast-toast

A fast and lightweight library for Angular 18+, also compatible with Ionic projects (based on Angular), that makes handling alerts and notifications effortless. Styled with Tailwind but built for production with a fully agnostic approach using Shadow DOM.

"Fast alerts, no hassle and powered by Shadow DOM!"

You can try the Live Demo

✨ Features

• 💡 Easy to use: Simple API to trigger notifications with various types and styles.
• 🎨 Customizable: Fully configurable notification styles.
• 🌐 Agnostic: A library with encapsulated styles, designed to work seamlessly across a wide range of Angular project configurations.
• 🥰 Minimal: Only requires dependencies from Angular, ensuring a lightweight and hassle-free integration.

🕹️ Installation and Usage

1. Install the library:

npm i ng-fast-toast@latest

3. Import the toast component NgFastToastComponent:

import { Component } from "@angular/core";
import { NgFastToastComponent } from "ng-fast-toast";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [NgFastToastComponent],
  templateUrl: "./app.component.html",
})
export class AppComponent {}

4. Add the <ng-fast-toast> selector:

<ng-fast-toast></ng-fast-toast>

A log message 🍞 ng-fast-toast initialized correctly with default config. is print in the browser console.

5. Use the toast service:

toast = inject(NgFastToastService);

ngOnInit() {
  this.toast.success({content: 'ng-fast-toast are ready!'});
}

Now you can showcase the success notification example 🚀.

📱 Ionic Support

This library is fully compatible with your Ionic project (based on Angular). You can try the Ionic test project to see the configuration and usage of the library.

📚 Documentation

You can find the full configuration and additional details in the complete documentation site.

📝 License

Copyright © 2025 rperezll (https://github.com/rperezll)

• This project is licensed under the GPL-3.0 License.
• See the LICENSE file for more information.