TypeScript icon, indicating that this package has built-in type declarations

    8.0.1 • Public • Published


    This is a slightly modified version of https://github.com/scttcper/ngx-toastr to resolve https://github.com/scttcper/ngx-toastr/issues/109

    Angular Toastr


    npm travis codecov greenkeeper
    DEMO: https://scttcper.github.io/ngx-toastr/


    • Toast Component Injection without being passed ViewContainerRef
    • No use of *ngFor. Fewer dirty checks and higher performance.
    • AoT compilation and lazy loading compatible
    • Component inheritance for custom toasts
    • SystemJS/UMD rollup bundle
    • Animations using Angular's Web Animations API (polyfill needed for older devices)
    • Output toasts to an optional target directive


    npm install ngx-toastr --save

    @angular/animations package is a required dependency for the default toast

    npm install @angular/animations --save

    Don't want to use @angular/animations? See Setup Without Animations.


    step 1: add css

    • copy toast css to your project.
    • If you are using sass you can import the css.
    @import "~ngx-toastr/toastr";
    // or import a bootstrap 4 alert styled design (SASS ONLY) 
    // should be after your bootstrap imports, it uses bs4 variables 
    @import "~ngx-toastr/toastr-bs4-alert"
    • If you are using angular-cli you can add it to your angular-cli.json

    step 2: add ToastrModule to app NgModule

    import { CommonModule } from '@angular/common';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { ToastrModule } from 'ngx-toastr';
      imports: [
        BrowserAnimationsModule, // required animations module
        ToastrModule.forRoot(), // ToastrModule added
      bootstrap: [App],
      declarations: [App],
    class MainModule {}



    import { ToastrService } from 'ngx-toastr';
    export class YourComponent {
      constructor(private toastr: ToastrService) {}
      showSuccess() {
        this.toastr.success('Hello world!', 'Toastr fun!');


    There are individual options and global options.

    Individual Options

    Passed to ToastrService.success/error/warn/info/show()

    Option Type Default Description
    toastComponent Component Toast Angular component that will be used
    closeButton boolean false Show close button
    timeOut number 5000 Time to live in milliseconds
    extendedTimeOut number 1000 Time to close after a user hovers over toast
    disableTimeOut boolean false Disable both timeOut and extendedTimeOut
    easing string 'ease-in' Toast component easing
    easeTime string | number 300 Time spent easing
    enableHtml boolean false Allow html in message
    progressBar boolean false Show progress bar
    progressAnimation 'decreasing' \| 'increasing' 'decreasing' Changes the animation of the progress bar.
    toastClass string 'toast' Class on toast
    positionClass string 'toast-top-right' Class on toast container
    titleClass string 'toast-title' Class inside toast on title
    messageClass string 'toast-message' Class inside toast on message
    tapToDismiss boolean true Close on click
    onActivateTick boolean false Fires changeDetectorRef.detectChanges() when activated. Helps show toast from asynchronous events outside of Angular's change detection

    Setting Individual Options

    success, error, info, warning take (message, title, ToastConfig) pass an options object to replace any default option.

    this.toastrService.error('everything is broken', 'Major Error', {
      timeOut: 3000,

    Global Options

    All individual options can be overridden in the global options to affect all toasts. In addition, global options include the following options:

    Option Type Default Description
    maxOpened number 0 Max toasts opened. Toasts will be queued. 0 is unlimited
    autoDismiss boolean false Dismiss current toast when max is reached
    iconClasses object see below Classes used on toastr service methods
    newestOnTop boolean true New toast placement
    preventDuplicates boolean false Block duplicate messages
    iconClasses defaults
    iconClasses = {
      error: 'toast-error',
      info: 'toast-info',
      success: 'toast-success',
      warning: 'toast-warning',

    Setting Global Options

    Pass values to ToastrModule.forRoot()

    // root app NgModule
        timeOut: 10000,
        positionClass: 'toast-bottom-right',
        preventDuplicates: true,

    Toastr Service methods return:

    Toastr Service will return undefined if prevent duplicates is enabled

    export interface ActiveToast {
      /** Your Toast ID. Use this to close it individually */
      toastId: number;
      /** the message of your toast. Stored to prevent duplicates */
      message: string;
      /** a reference to the component see portal.ts */
      portal: ComponentRef<any>;
      /** a reference to your toast */
      toastRef: ToastRef<any>;
      /** triggered when toast is active */
      onShown: Observable<any>;
      /** triggered when toast is destroyed */
      onHidden: Observable<any>;
      /** triggered on toast click */
      onTap: Observable<any>;
      /** available for your use in custom toast */
      onAction: Observable<any>;

    Put toasts in your own container

    Put toasts in a specific div inside your application. This should probably be somewhere that doesn't get deleted. Add ToastContainerModule to the ngModule where you need the directive available.

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { ToastrModule, ToastContainerModule } from 'ngx-toastr';
    import { AppComponent } from './app.component';
      declarations: [AppComponent],
      imports: [
        ToastrModule.forRoot({ positionClass: 'inline' }),
      providers: [],
      bootstrap: [AppComponent],
    export class AppModule {}

    Add a div with toastContainer directive on it.

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { ToastContainerDirective, ToastrService } from 'ngx-toastr';
      selector: 'app-root',
      template: `
      <h1><a (click)="onClick()">Click</a></h1>
      <div toastContainer></div>
    export class AppComponent implements OnInit {
      @ViewChild(ToastContainerDirective) toastContainer: ToastContainerDirective;
      constructor(private toastrService: ToastrService) {}
      ngOnInit() {
        this.toastrService.overlayContainer = this.toastContainer;
      onClick() {
        this.toastrService.success('in div');


    If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

    In your SystemJS config file, map needs to tell the System loader where to look for ngx-toastr:

    map: {
      'ngx-toastr': 'node_modules/ngx-toastr/toastr.umd.js',

    Setup Without Animations

    If you do not want to include @angular/animations in your project you can override the default toast component in the global config to use ToastNoAnimation instead of the default one.

    In your main module (ex: app.module.ts)

    import {
    } from 'ngx-toastr';
      imports: [
        // ...
        // BrowserAnimationsModule no longer required
          toastComponent: ToastNoAnimation,
      // ...
    class AppModule {}

    That's it! Animations are no longer required.

    Using A Custom Toast

    Create your toast component extending Toast see the demo's pink toast for an example https://github.com/scttcper/ngx-toastr/blob/master/src/app/pink.toast.ts

    import { ToastrModule } from 'ngx-toastr';
      imports: [
          toastComponent: YourToastComponent, // added custom toast!
      entryComponents: [YourToastComponent], // add!
      bootstrap: [App],
      declarations: [App, YourToastComponent], // add!
    class AppModule {}


    1. ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
      When opening a toast inside an angular lifecycle wrap it in setTimeout
    ngOnInit() {
        setTimeout(() => this.toastr.success('sup'))
    1. Change default icons (check, warning sign, etc)
      Overwrite the css background-image https://github.com/scttcper/ngx-toastr/blob/master/src/lib/toastr.css
    2. How do I use this in an ErrorHandler? See: https://github.com/scttcper/ngx-toastr/issues/179
    3. How can I translate messages See: https://github.com/scttcper/ngx-toastr/issues/201

    Previous Works

    toastr original toastr
    angular-toastr AngularJS toastr
    notyf notyf (css)




    npm i @naisone/ngx-toastr

    DownloadsWeekly Downloads






    Last publish


    • wahler
    • bensinther
    • philipp.stein