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




Package Sidebar


npm i ng6-toastr-notifications

Weekly Downloads






Unpacked Size

602 kB

Total Files


Last publish


  • sagarprince