https://github.com/rperezll/ng-fast-toast

A fast & lightweight library for Angular 18+ (Ionic compatible) to handle alerts and notifications effortlessly, styled with Tailwind CSS and using Shadow DOM for production
https://github.com/rperezll/ng-fast-toast

alerts angular ionic notifications open-source shadowdom toast

Last synced: 4 months ago
JSON representation

A fast & lightweight library for Angular 18+ (Ionic compatible) to handle alerts and notifications effortlessly, styled with Tailwind CSS and using Shadow DOM for production

• Host: GitHub
• URL: https://github.com/rperezll/ng-fast-toast
• Owner: rperezll
• License: gpl-3.0
• Created: 2024-10-01T16:42:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-03T11:03:26.000Z (over 1 year ago)
• Last Synced: 2025-10-04T12:42:15.308Z (8 months ago)
• Topics: alerts, angular, ionic, notifications, open-source, shadowdom, toast
• Language: TypeScript
• Homepage: https://ng-fast-toast.vercel.app
• Size: 620 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ng-fast-toast - Fast, lightweight Angular 18+ library for effortless alerts/notifications, Ionic-compatible, Tailwind-styled, using Shadow DOM. (Third Party Components / Notifications)
• trackawesomelist - ng-fast-toast (⭐2) - 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. (Recently Updated / [Feb 12, 2025](/content/2025/02/12/README.md))
• fucking-awesome-angular - ng-fast-toast - Fast, lightweight Angular 18+ library for effortless alerts/notifications, Ionic-compatible, Tailwind-styled, using Shadow DOM. (Third Party Components / Notifications)

README

          
# 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**](https://ng-fast-toast.vercel.app)

## ✨ 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:**

```bash

npm i ng-fast-toast@latest

```

3. **Import the toast component `NgFastToastComponent`:**

```ts

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 `` selector:**

```html

```

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

5. **Use the toast service:**

```ts

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](/test/ionic-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**](https://ng-fast-toast.rperezll.dev/).

## 📝 License

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

- This project is licensed under the **GPL-3.0 License**.

- See the [**LICENSE file**](https://github.com/atmgrupomaggioli/docshub/blob/main/LICENSE) for more information.