Angular 17 - 21

Toast notifications
simple and elegant

A toast notification library for Angular, built with focus on simplicity, accessibility, and zero external dependencies.

Get Started View Documentation
Changes saved
Your profile has been updated successfully.
New update available
Version 4.2 includes performance improvements.
Why Toastly?

Everything you need,
nothing you don't

Built with focus on simplicity and code clarity.

Zero Dependencies

Only Angular as peer dependency. No external libraries, no version conflicts, no surprises.

Native Signals

Built with Angular's Signals API. Reactive, performant state without unnecessary RxJS.

Memory Safe

All timers are automatically cleaned up. No memory leaks, no side effects, no surprises.

Accessible

ARIA live regions for screen readers. Respects reduced motion preferences automatically.

Fully Customizable

CSS variables for everything. Works with Tailwind, PrimeFlex, or pure CSS. You decide the look.

Readable Code

Written to be understood by any developer. No tricks, no magic, no abbreviations.

Try it!

Test the toasts now

Click the buttons below to see toasts in action.

Tipos de Toast

Escolha um tipo para visualizar

Variações

Experimente diferentes configurações

Getting Started

Start in 3 minutes

Simple installation, intuitive usage.

1

Install the library

Run this command in your terminal, inside your Angular project:

Terminal 
npm install toastly
💡 What does this do? Downloads the Toastly library and adds it as a dependency in your package.json.
2

Add the container

The container is where toasts appear. Add it to your main component:

app.component.ts 
import { Component } from '@angular/core';
import { ToastContainerComponent } from 'ng-toastly';

@Component({
  selector: 'app-root',
  imports: [ToastContainerComponent],
   template: `
    <router-outlet />
    
    `<!-- Add this line -->
    <toastly-container />
  `,
})
export class AppComponent {}
💡 Why in the main component? This way toasts appear on any page of your application.
3

Show your first toast!

Use the ToastService in any component to show notifications:

meu-componente.ts 
import { inject } from '@angular/core';
import { ToastService } from 'ng-toastly';

export class MeuComponente {
  // Inject the toast service
  private readonly toastService = inject(ToastService);

  salvarDados(): void {
    // Show a success toast!
    this.toastService.success('Data saved successfully!');
  }
}
🎉 Done! Your toast is now working. Continue reading the documentation for customizations.

Want to learn more?

The full documentation has examples, customizations, and best practices.

View Full Documentation
FAQ

Frequently Asked Questions

Does it work with Angular 17, 18, 19, 20 and 21?

Yes! The library is compiled with compilationMode: "partial", which allows it to work on any Angular version between 17 and 21. You don't need to worry about compatibility.

Do I need to install any other dependency?

No! Toastly has zero external dependencies. Only Angular as peer dependency. This means fewer conflicts, smaller builds and easier maintenance.

Does it work with Tailwind CSS?

Yes! You can pass custom CSS classes through the styleClass parameter. Works with Tailwind, PrimeFlex, Bootstrap or any CSS framework.

Are timers cleaned up automatically?

Yes! All auto-dismiss timers are stored in a Map and cleaned up automatically when the toast is removed or when the service is destroyed. This prevents memory leaks.

Is it accessible for screen readers?

Yes! The container uses aria-live="polite" to announce new toasts to screen readers. Warning and danger toasts use role="alert". Animations are automatically disabled when the user has prefers-reduced-motion enabled.