Angular 6 Toaster Notifications Module

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

Usage

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';
   
       @NgModule({
       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';
   
       @Component({
           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() {
               this.toastr.customToastr(
               '<span style='color: green; font-size: 16px; text-align: center;'>Custom Toast</span>',
               null,
               { 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] (http://technoidlab.com/demos/ng6-toastr-notifications)

How to Run demo app

angular-cli

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

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

webpack

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