ngx-toastr

Simple, configurable toast notifications for Angular — show success, error, warning, and info messages with ease.

ngx-toastr

Angular

Simple, configurable toast notifications for Angular — show success, error, warning, and info messages with ease.

npm GitHub Docs

Fit

Bundle (gzip)

5.0 kB

23.3 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Showing transient feedback messages (save confirmations, error alerts) in Angular requires either a shared service with complex state, or reaching for a UI library that brings far more than you need.

What It Does

ngx-toastr provides a ToastrService you inject anywhere. Call toastr.success(), toastr.error(), or toastr.warning() and a styled notification appears in a configurable position. Toasts auto-dismiss, stack, and support click callbacks.

Installation

bash

npm install ngx-toastr

Usage Example

typescript

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    ToastrModule.forRoot({ positionClass: 'toast-bottom-right', timeOut: 3000 }),
  ],
})
export class AppModule {}

typescript

import { ToastrService } from 'ngx-toastr';

@Component({...})
export class AppComponent {
  constructor(private toastr: ToastrService) {}

  save() {
    this.toastr.success('Changes saved!', 'Success');
  }
}

Related packages

@angular/cdkAngular

Angular Component Dev Kit — a set of behavior primitives for building accessible, high-quality UI components without prescribing any visual style.

@angular/materialAngular

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

@ng-bootstrap/ng-bootstrapAngular

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

ng-zorro-antdAngular

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

@ngneat/until-destroyAngular

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.