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

    1.0.4 • Public • Published

    Angular 6 Toaster Notifications Module

    NOTE : Tested with Angular v6.0.0 and Angular-Cli v6.0.0.


    1. Install ng6-toastr-notifications using npm:

      npm install ng6-toastr-notifications --save

    2. Add ToastrModule into your AppModule class. app.module.ts would look like this:

      Take Note : For Toastr Animations working perfectly please import BrowserAnimationsModule into app.module.ts file.

          import { BrowserModule } from '@angular/platform-browser';
          import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
          import { NgModule } from '@angular/core';
          import { AppComponent } from './app.component';
          import { ToastrModule } from 'ng6-toastr-notifications';
          declarations: [AppComponent],
          imports: [BrowserModule, BrowserAnimationsModule, ToastrModule.forRoot()],
          providers: [],
          bootstrap: [AppComponent]
          export class AppModule {}
    3. Inject 'ToastsManager' class in your component class.

          import { Component } from '@angular/core';
          import { ToastrManager } from 'ng6-toastr-notifications';
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss']
          export class AppComponent {
              constructor(public toastr: ToastrManager) {}
              showSuccess() {
                  this.toastr.successToastr('This is success toast.', 'Success!');
              showError() {
                  this.toastr.errorToastr('This is error toast.', 'Oops!');
              showWarning() {
                  this.toastr.warningToastr('This is warning toast.', 'Alert!');
              showInfo() {
                  this.toastr.infoToastr('This is info toast.', 'Info');
              showCustom() {
                  '<span style='colorgreenfont-size: 16pxtext-aligncenter;'>Custom Toast</span>',
                  { enableHTML: true }
              showToast(position: any = 'top-left') {
                  this.toastr.infoToastr('This is a toast.', 'Toast', {
                      position: position

    ToastrOptions Configurations

    By default, the toastr will show up at top right corner of the page view, and will automatically dismiss in 3 seconds. You can configure the toasts using ToastOptions class. Currently we support following options:

    toastTimeout: (number)

    Determines how long an auto-dismissed toast will be shown. Defaults to 5000 miliseconds.

    dismiss: (string)

    Determine how a displayed toaster can be dismissed. Allowed values are: 'auto', 'click', 'controlled' (value should all be lowercase).

    • auto: Toaster will auto dismiss in miliseconds (value specified by toastTimeout). This is default value.
    • click: Toaster will be dismissed when user click on it.
    • controlled: Toaster will be dismissed based on specific logic.
    newestOnTop: (boolean)

    Determines whether new toast should show up on top of previous toast Defaults to false.

    showCloseButton: (boolean)

    Determines whether toast should include 'x' close button. Defaults to false.

    maxShown: (number)

    Determines maximum number of toasts can be shown on the page in the same time. Defaults to 5.

    position: (string)

    Determines where on the page the toasts should be shown. Here are list of values:

    • top-right (Default)
    • top-center
    • top-left
    • top-full-width
    • bottom-right
    • bottom-center
    • bottom-left
    • bottom-full-width
    messageClass: (string)

    CSS class for message within toast.

    titleClass: (string)

    CSS class for title within toast.

    animate: (string)

    You have following choice: 'slideFromLeft', 'slideFromRight' or 'slideFromTop'.

    • slideFromLeft: makes every toast slide in from left side. (Default)
    • slideFromRight: makes every toast slide in from right side.
    • slideFromTop: makes every toast slide in from top side.
    • slideFromBottom: makes every toast slide in from bottom side.
    • fade: makes every toast either fade in or fade out.
    • You can set animate: null to disable animations.
    enableHTML: (boolean)

    Allow input of message to be HTML. Default to false.

    Demo App Link

    Ng6 Toastr Notification Demo Link

    How to Run demo app


    > cd demo/ngcli && npm install
    > ng serve   

    Then navigate your browser to http://localhost:4200


    > cd demo/webpack && npm run install
    > npm run build
    > npm start




    npm i ng6-toastr-notifications

    DownloadsWeekly Downloads






    Unpacked Size

    602 kB

    Total Files


    Last publish


    • sagarprince