Note: This repository is a fork of ngx-toastr. It builds upon the original project to provide additional features, fixes, and customizations.

DEMO: https://iqxlimited.github.io/ngx-toastr/

Features

• Toast component injection without being passed ViewContainerRef
• AoT compilation and lazy loading compatible
• Component inheritance for custom toasts
• Animations using pure CSS transitions
• Output toasts to an optional target directive
• Zoneless Angular compatible

See CHANGELOG.md for 3.x migration notes.

Dependencies

| ngx-toastr | Angular | | ---------- | ------- | | 1.x | 20.x | | 2.x | 21.x | | 3.x | 22.x |

Peer dependencies: @angular/core, @angular/common, and @angular/platform-browser >= 20.

Install

npm install @iqx-limited/ngx-toastr

Setup

Step 1: Add styles

Option A — import in global styles (recommended)

// Default toast styles — use the package export path, not node_modules/
@import "@iqx-limited/ngx-toastr/toastr";

// Optional: Bootstrap alert-style toast (SASS only)
// Import after your Bootstrap functions, variables, and mixins
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "@iqx-limited/ngx-toastr/toastr-bs-alert";

Option B — add to angular.json

"styles": [
  "src/styles.scss",
  "node_modules/@iqx-limited/ngx-toastr/toastr.css"
]

Published style exports (files ship at the package root):

| Import path | Resolves to | | ----------- | ----------- | | @iqx-limited/ngx-toastr/toastr | toastr.css | | @iqx-limited/ngx-toastr/toastr.css | toastr.css | | @iqx-limited/ngx-toastr/toastr-bs-alert | toastr-bs-alert.scss | | @iqx-limited/ngx-toastr/toastr-bs-alert.scss | toastr-bs-alert.scss |

Step 2: Add providers

import { bootstrapApplication } from "@angular/platform-browser"
import { AppComponent } from "./app/app.component"
import { provideToastr } from "@iqx-limited/ngx-toastr"

bootstrapApplication(AppComponent, {
  providers: [
    provideToastr(),
  ],
})

For toasts without CSS enter/exit animations (uses display: none instead):

import { provideToastrNoAnimation } from "@iqx-limited/ngx-toastr"

bootstrapApplication(AppComponent, {
  providers: [
    provideToastrNoAnimation(),
  ],
})

Use

import { Component, inject } from "@angular/core"
import { ToastrService } from "@iqx-limited/ngx-toastr"

@Component({
  selector: "app-example",
  template: `<button (click)="showSuccess()">Show toast</button>`,
})
export class ExampleComponent {
  private readonly toastr = inject(ToastrService)

  showSuccess() {
    this.toastr.success("Hello world!", "Toastr fun!")
  }
}

Options

There are individual options and global options.

Individual options

Passed to ToastrService.success(), error(), warning(), info(), or show().

| Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | toastComponent | Component | Toast | Angular component used to render the toast | | closeButton | boolean | false | Show close button | | timeOut | number | 5000 | Time to live in milliseconds | | extendedTimeOut | number | 1000 | Time to close after hover ends | | disableTimeOut | boolean \| 'timeOut' \| 'extendedTimeOut' | false | Disable timeout behaviour | | easing | string | 'ease-in' | CSS easing for animated toasts | | easeTime | string \| number | 300 | CSS transition duration (ms) | | enableHtml | boolean | false | Allow HTML in message (sanitized) | | newestOnTop | boolean | true | Insert new toasts at the top | | progressBar | boolean | false | Show progress bar | | progressAnimation | 'decreasing' \| 'increasing' | 'decreasing' | Progress bar direction | | toastClass | string | 'ngx-toastr' | CSS class on toast element | | positionClass | string | 'toast-top-right' | CSS class on toast container | | titleClass | string | 'toast-title' | CSS class on title | | messageClass | string | 'toast-message' | CSS class on message | | tapToDismiss | boolean | true | Close on click | | onActivateTick | boolean | false | Call ApplicationRef.tick() when a no-animation toast activates |

Setting individual options

this.toastr.error("everything is broken", "Major Error", {
  timeOut: 3000,
})

Global options

All individual options can be set globally via provideToastr() / provideToastrNoAnimation().

| Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | maxOpened | number | 0 | Max open toasts (0 = unlimited) | | autoDismiss | boolean | false | Dismiss oldest toast when max is reached | | iconClasses | object | see below | CSS classes per toast type | | preventDuplicates | boolean | false | Block duplicate messages | | countDuplicates | boolean | false | Show duplicate counter | | resetTimeoutOnDuplicate | boolean | false | Reset timeout on duplicate | | includeTitleDuplicates | boolean | false | Compare title when checking duplicates |

iconClasses defaults

iconClasses = {
  error: "toast-error",
  info: "toast-info",
  success: "toast-success",
  warning: "toast-warning",
}

Setting global options

import { bootstrapApplication } from "@angular/platform-browser"
import { provideToastr } from "@iqx-limited/ngx-toastr"
import { AppComponent } from "./app/app.component"

bootstrapApplication(AppComponent, {
  providers: [
    provideToastr({
      timeOut: 10000,
      positionClass: "toast-bottom-right",
      preventDuplicates: true,
    }),
  ],
})

Toastr service return value

export interface ActiveToast<C = unknown> {
  toastId: number
  title: string
  message: string
  portal: ComponentRef<C>
  toastRef: ToastRef<C>
  onShown: Observable<void>
  onHidden: Observable<void>
  onTap: Observable<void>
  onAction: Observable<unknown>
}

Custom toast components

Extend Toast (animated) or NoAnimationToast and pass your component via toastComponent:

import { Component } from "@angular/core"
import { Toast, ToastrService } from "@iqx-limited/ngx-toastr"

@Component({
  selector: "[my-toast-component]",
  template: `
    <div>{{ title }} — {{ message }}</div>
    <button (click)="remove()">Close</button>
  `,
})
export class MyToast extends Toast {
  // ToastrService and ToastPackage are available on the base class
}

this.toastr.show("Saved!", "Done", {
  toastComponent: MyToast,
})

Note: ToastNoAnimation is deprecated. Use NoAnimationToast instead (the alias remains exported for backwards compatibility).

Custom toast container

Place toasts inside a specific element using the toastContainer directive. The container should have aria-live="polite".

import { Component, inject, OnInit, ViewChild } from "@angular/core"
import { ToastContainerDirective, ToastrService } from "@iqx-limited/ngx-toastr"

@Component({
  selector: "app-root",
  template: `
    <button (click)="onClick()">Show toast</button>
    <div aria-live="polite" toastContainer></div>
  `,
})
export class AppComponent implements OnInit {
  @ViewChild(ToastContainerDirective, { static: true })
  toastContainer!: ToastContainerDirective

  private readonly toastrService = inject(ToastrService)

  ngOnInit() {
    this.toastrService.overlayContainer = this.toastContainer
  }

  onClick() {
    this.toastrService.success("in div")
  }
}

API

Clear

Remove all toasts, or a single toast by id:

toastrService.clear()
toastrService.clear(toastId)

Remove

Remove and destroy a single toast by id:

toastrService.remove(toastId)

Development

This repo is an Angular workspace with two projects:

| Project | Path | Purpose | | ------- | ---- | ------- | | Library | projects/ngx-toastr/ | Published npm package (@iqx-limited/ngx-toastr) | | Demo | projects/demo/ | GitHub Pages demo app |

npm ci
npm run build          # Build library → dist/
npm start              # Serve demo at http://localhost:4200
npm run demo:build     # Build demo → dist-demo/
npm test               # tsc-verify + unit tests
npm run lint           # ESLint

The library package.json at projects/ngx-toastr/package.json is synced from the root manifest before each build via npm run sync-package.

License

MIT