stabzs/angular2-toaster

Angular2-toaster is an asynchronous, non-blocking Angular Toaster Notification library

Angular2-Toaster

angular2-toaster is an asynchronous, non-blocking, Ahead of Time Compilation-supported Angular Toaster Notification library largely based off of AngularJS-Toaster.

Version ^11.0.0 has a number of new features, type definitions, and breaking changes. Please review the CHANGELOG for a list of features and breaking changes before upgrading.

Version ^5.0.0 requires either .forRoot() or .forChild() ToasterModule inclusion. Please read the 5.x.x release notes and the Getting Started section before upgrading.

Version ^4.0.0 now supports @angular/animations, which is a breaking change. Please read both the Getting Started and Animations sections before upgrading.

Demo

A dynamic Angular and Typescript demo can be found at this plunker.

Getting Started

Installation:

npm install angular2-toaster

Import CSS

Copy or Link CSS

<link rel="stylesheet" type="text/css" href="/node_modules/angular2-toaster/toaster.css" />

or

<link rel="stylesheet" type="text/css" href="/node_modules/angular2-toaster/toaster.min.css" />

Import CSS with Sass or Less

@import 'node_modules/angular2-toaster/toaster';

Compile the Library's SCSS

@import 'node_modules/angular2-toaster/toaster';

Import Library

Import via SystemJS

Within the map property of the systemjs.config file, add mappings for angular, rxjs (which is a dependency), and the angular2-toaster bundled umd file:

map: {
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      // ...
      // other libraries
      'rxjs':  'npm:rxjs',
      'angular2-toaster': 'npm:angular2-toaster/bundles/angular2-toaster.umd.js'

Import via Webpack

Simply follow the Getting Started instructions to import the library.

Getting Started With Default Configuration - NgModule (Recommended):

import {NgModule, Component} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterModule, ToasterService} from 'angular2-toaster';
import {Root} from './root.component'

@NgModule({
    imports: [BrowserAnimationsModule, ToasterModule.forRoot()],
    declarations: [Root],
    bootstrap: [Root]
})

@Component({
    selector: 'root',
    template: `
            <toaster-container></toaster-container>
            <button (click)="popToast()">pop toast</button>`
})

export class Root {
    private toasterService: ToasterService;

    constructor(toasterService: ToasterService) {
        this.toasterService = toasterService;
    }

    popToast() {
        this.toasterService.pop('success', 'Args Title', 'Args Body');
    }
}

ToasterModule.forRoot() is recommended for most applications as it will guarantee a single instance of the ToasterService, ensuring that all recipient containers observe the same ToasterService events.

For subsequent inclusions, use ToasterModule.forChild() to provide the ToasterContainerComponent only, ensuring that ToasterService is still held as a singleton at the root.

Getting Started with Default Configuration - Manual Component Inclusion (obsolete >= 5.0.0):

import {Component} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterContainerComponent, ToasterService} from 'angular2-toaster';

@Component({
    selector: 'root',
    imports: [BrowserAnimationsModule],
    directives: [ToasterContainerComponent],
    providers: [ToasterService],
    template: `
        <toaster-container></toaster-container>
        <button (click)="popToast()">pop toast</button>`
})

class Root {
    private toasterService: ToasterService;
    
    constructor(toasterService: ToasterService) {
        this.toasterService = toasterService;    
    }
    
    popToast() {
        this.toasterService.pop('success', 'Args Title', 'Args Body');
    }
}

bootstrap(Root);

Getting Started with Configuration Override:

import {Component} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';

@Component({
    selector: 'root',
    imports: [BrowserAnimationsModule, ToasterModule.forRoot()],
    template: `
        <toaster-container [toasterconfig]="config">
        </toaster-container>
        <button (click)="popToast()">pop toast</button>`
})

class Root {
    private toasterService: ToasterService;
    
    constructor(toasterService: ToasterService) {
        this.toasterService = toasterService;    
    }
    
    public config: ToasterConfig = 
        new ToasterConfig({
            showCloseButton: true, 
            tapToDismiss: false, 
            timeout: 0
        });
    
    popToast() {
        this.toasterService.pop('success', 'Args Title', 'Args Body');
    }
}

bootstrap(Root);

Asynchronous vs Synchronous ToasterService

ToasterService exposes both a synchronous and asynchronous pop method in the form of pop() and popAsync() respectively.

pop() returns a concrete Toast instance after the toastId property has been hydrated and the toast has been added to all receiving containers.

popAsync() returns a hot Observable<Toast> that may be subscribed to to receive multiple toast updates.

Customize Toast arguments in pop

var toast: Toast = {
    type: 'success',
    title: 'close button',
    showCloseButton: true
};

this.toasterService.pop(toast);

Clear Existing Toast

ToasterService exposes a clear function that accepts two optional parameters: toastId and toastContainerId.

These parameters can be used to clear toasts by specific id, by container id, by both, or by neither. If both parameters are omitted, all toasts in all containers will be removed.

var toast = this.toasterService.pop('success', 'title', 'body');
this.toasterService.clear(toast.toastId, toast.toastContainerId);

Animations

Starting with version 4.0.0 and greater, Animation configuration is required, as described in the Getting Started section.

To add animations:

• Install the @angular/animations npm package via npm install @angular/animations.

• Add the BrowserAnimationsModule to your root module

  import {NgModule, Component} from '@angular/core';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import {ToasterModule} from 'angular2-toaster';
  
  @NgModule({
      imports: [BrowserAnimationsModule, ToasterModule],
      ...

If you want to avoid bringing in an additional module solely for the sake of animations, you can explicitly configure angular2-toaster to ignore animations. To do so, import the NoopAnimationsModule instead:

import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterModule} from 'angular2-toaster';
    
@NgModule({
    imports: [NoopAnimationsModule, ToasterModule],
    ...

Angular Animations require browsers that support the Web Animations Standard.

If you need to target a non-supported browser, a polyfill is required.

Configurable Options

Toast Types

By default, five toast types are defined via the ToastType type: 'error, 'info', 'wait', 'success', and 'warning'.

The existing toast type configurations can be overridden by passing a mapping object that uses the same type names but overrides the style class:

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({typeClasses: {
      error: 'custom-toast-error',
      info: 'custom-toast-info',
      wait: 'custom-toast-wait',
      success: 'custom-toast-success',
      warning: 'custom-toast-warning'
    }});

In addition, the default options can be overridden, replaced, or expanded, by extending the toast type with a custom type and passing a mapping object to the config, where the key corresponds to the toast type and the value corresponds to a custom class:

NOTE: When providing a custom type, both the typeClasses and iconClasses objects must be updated. In the case where either are not provided, the toast type will fall back to the defaultToastType which defaults to info.

import {DefaultTypeClasses, DefaultIconClasses} from 'angular2-toaster';
type ExtendedToastType = ('partial-success') & ToastType;

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

extendedTypeClasses = { ...DefaultTypeClasses, ...{ 'partial-success': 'toast-partial-success' }};
extendedIconClasses = { ...DefaultIconClasses, ...{ 'partial-success': 'icon-partial-success' }};

public config: ToasterConfig = 
    new ToasterConfig({
        typeClasses: <ExtendedToastType>this.extendedTypeClasses,
        iconClasses: <ExtendedToastType>this.extendedIconClasses
    });

Animations

There are five animation styles that can be applied via the toasterconfig animation property: 'fade', 'flyLeft', 'flyRight', 'slideDown', and 'slideUp'. Any other value will disable animations.

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({animation: 'fade'});

Limit

Limit is defaulted to null, meaning that there is no maximum number of toasts that are defined before the toast container begins removing toasts when a new toast is added.

To change this behavior, pass a "limit" option to the config:

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({limit: 5});

Tap to Dismiss

By default, the tapToDismiss option is set to true, meaning that if a toast is clicked anywhere on the toast body, the toast will be dismissed. This behavior can be overriden in the config so that if set to false, the toast will only be dismissed if the close button is defined and clicked:

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({tapToDismiss: false});

Container Position

There are nine pre-built toaster container position configurations:

'toast-top-full-width', 'toast-bottom-full-width', 'toast-center',
'toast-top-left', 'toast-top-center', 'toast-top-right',
'toast-bottom-left', 'toast-bottom-center', 'toast-bottom-right'

By default, 'toast-top-right' will be used. You can specify an override (or your own custom position class that correlates to your CSS) via the positionClass property:

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({positionClass: 'toast-top-left'});

Close Button

The Close Button's visibility can be configured at three different levels:

• Globally in the config for all toast types:

  template: 
      `<toaster-container [toasterconfig]="config"></toaster-container>`
  
  public config: ToasterConfig = 
      new ToasterConfig({showCloseButton: true});

• Per info-class type: By passing the close-button configuration as an object instead of a boolean, you can specify the global behavior an info-class type should have.

  template: 
      `<toaster-container [toasterconfig]="config"></toaster-container>`
  
  public config: ToasterConfig = 
      new ToasterConfig({
          showCloseButton: { 'warning': true, 'error': false }
      });

  If a type is not defined and specified, the default behavior for that type is false.

• Per toast constructed via Toast object creation:

  var toast : Toast = {
      type: 'error',
      title: 'Title text',
      body: 'Body text',
      showCloseButton: true
  };
  
  this.toasterService.pop(toast);

  This option is given the most weight and will override the global configurations for that toast. However, it will not persist to other toasts of that type and does not alter or pollute the global configuration.

Close Html

The close button html can be overridden either globally or per toast call.

• Globally:

  template: 
      `<toaster-container [toasterconfig]="config"></toaster-container>`
  
  public config: ToasterConfig = 
      new ToasterConfig({
          closeHtml: '<button>Close</button>'
      });

• Per toast:

  var toast : Toast = {
      type: 'error',
      title: 'Title text',
      body: 'Body text',
      showCloseButton: true,
      closeHtml: '<button>Close</button>'
  };
  
  this.toasterService.pop(toast);

Newest Toasts on Top

The newestOnTop option is defaulted to true, adding new toasts on top of other existing toasts. If changed to false via the config, toasts will be added to the bottom of other existing toasts.

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({newestOnTop: false});

Timeout

By default, toasts have a timeout setting of 5000, meaning that they are removed after 5000 milliseconds.

If the timeout is set to anything other than a number greater than 0, the toast will be considered "sticky" and will not automatically dismiss.

The timeout can be configured at three different levels:

• Globally in the config for all toast types:

  template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`
  
  public config: ToasterConfig = 
        new ToasterConfig({timeout: 2000});

• Per info-class type: By passing the timeout config option as an object instead of a number, you can specify the global behavior an info-class type should have.

  template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`
  
  public config: ToasterConfig = 
      new ToasterConfig({timeout: {error:1000});
  

If a type is not defined and specified, a timeout will not be applied, making the toast "sticky".

• Per toast constructed via toaster.pop('success', "title", "text"):

  var toast : Toast = {
      type: 'error',
      title: 'Title text',
      body: 'Body text',
      showCloseButton: true,
      closeHtml: '<button>Close</button>'
  };
        
  this.toasterService.pop(toast);

Prevent Timeout on Mouseover

By default, all toasts are dismissed when their timer expires, even if you mouse over the toast.
This can be overriden via the container's config.

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({mouseoverTimerStop: false});

Body Output Type

There are three different types of body renderings that can be passed via the toast.bodyOutputType argument: 'Default', 'TrustedHtml', and 'Component'. If a bodyOutputType is not provided, it will be defaulted to 'Default'.

• Default: The body argument will be directly interpolated as text content. If html is passed in the body argument, it will be encoded and rendered as text.

• TrustedHtml: The body argument will be parsed and rendered as html content.

  import {BodyOutputType} from 'angular2-toaster';
  var toast : Toast = {
      type: 'error',
      title: 'Title text',
      body: '<h4>Body text</h4>',
      bodyOutputType: BodyOutputType.TrustedHtml
  };
            
  this.toasterService.pop(toast);

• Component: The body argument is the name of the component class to be rendered as the content of the toast.

  import {BodyOutputType} from 'angular2-toaster';
  
  @Component({
    selector: 'dynamic-component',
    template: `<div>loaded via component</div>`
  })
  class DynamicComponent { }
  
  var toast : Toast = {
      type: 'error',
      title: 'Title text',
      body: DynamicComponent,
      bodyOutputType: BodyOutputType.Component
  };
            
  this.toasterService.pop(toast);

  The Component BodyOutputType offers the additional flexibilty of attaching the toast instance to your component. It is recommended that you expose a public property on your component for type safe access to the toast instance if you need to consume it inside of your component.
  Mutation of the toast instance is not recommended.

Progress Bar

A progress bar can be enabled per toast via the progressBar property. If set to true, a progress bar will be displayed that indicates how much time is remaining for the toast before it is automatically dismissed.

The progress bar has two directions: decreasing or right-to-left and increasing, or left-to-right. While defaulted to decreasing, it can be overridden per toast:

var toast: Toast = {
  type: 'success',
  progressBar: true,
  progressBarDirection: 'increasing'  
};

this.toasterService.pop(toast);

On Show Callback

An onShow callback function can be attached to each toast instance. The callback will be invoked upon toast add.

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onShowCallback: (toast) => this.toasterService.pop('success', 'invoked from ' + toast.title + ' onShow callback')  
};

this.toasterService.pop(toast);

On Hide Callback

An onHide callback function can be attached to each toast instance. The callback will be invoked upon toast removal.

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onHideCallback: (toast) => this.toasterService.pop('success', 'invoked from ' + toast.title + ' onHide callback')  
};

this.toasterService.pop(toast);

On Click Callback

An onClick callback function can be attached to each toast instance. The callback will be invoked upon the toast being clicked, even if the click is the close button. The callback will be invoked before the toast is removed.

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onClickCallback: (toast) => this.toasterService.pop('success', 'invoked from ' + toast.title + ' onClick callback')  
};

this.toasterService.pop(toast);

Building the Source

In order to build Angular2-Toaster for development, you will need to have Git and Node.js installed.

Clone a copy of the repo:

git clone https://github.com/stabzs/Angular2-Toaster.git

In the cloned directory, run:

npm install

Run Angular AoT compiler:

npm run build

Run Karma test instance with coverage report:

ng test angular2-toaster --code-coverage

Frequently Asked Questions and Issues

I get the No Toaster Containers have been initialized to receive toasts. error

You have not properly initialized a toaster container instance before trying to publish a toast. Make sure that you have rendered the toaster-container component and that you are importing the ToasterModule with ToasterModule.forRoot().

Toasts are not displayed when popped from an error handler

The handleError function is executed outsize of an Angular zone. You need to explicitly tell Angular to run the pop call within the context of a zone.

export class AppErrorHandler implements ErrorHandler {
    constructor(
        private toasterService: ToasterService,
        private ngZone : NgZone) { }

    handleError(error: any): void {
        this.ngZone.run(() => {
            this.toasterService.pop('error', "Error", error);
        });  
    }
}

(See this great Stack Overflow Answer for more details).

Author

Stabzs

Credits

Rewritten from https://github.com/jirikavi/AngularJS-Toaster

Inspired by http://codeseven.github.io/toastr/demo.html.

Copyright

Copyright © 2016-2020 Stabzs.

Licence

This project is licensed under the MIT license. See the LICENSE file for more info.

angular2-toaster's Issues

Bundle? Package?

Hi, thanks for this component.
Seems to be useful.
But as it is, we can't use is, because it is missing a package / bundle, which we could easily include in our project. We aren't using Webpack and we aren't deploying Node modules.

Would be great, thanks.

Icon class names

I have a suggestion.
Your icon classes are all named icon-*
Would be possible to rename them to a more specific name?
Many font libraries out there are already using icon-, so there will be conflicts with existing class names. So I have now to rename your classes in our app.

Thanks

Basic Usecase - No Directive annotation found on ToasterContainerComponent

I tried using angular2-toaster with the most simplest example. Tried exactly the way mentioned in Readme. and got the following:

I downloaded angular2-toaster from npm which gave me 0.1.0-beta.3

Tried making a very basic use on my app.ts (my root component) as mentioned in examples on Readme.md

Getting the following:

EXCEPTION: No Directive annotation found on ToasterContainerComponent
BaseException {message: "No Directive annotation found on ToasterContainerComponent", stack: "Error: No Directive annotation found on ToasterCon…/polyfills.bundle.js:1152:2), :274:21)"}
`

Error: Uncaught (in promise): No Directive annotation found on ToasterContainerComponent

zone.ts?949c:855 Unhandled Promise rejection: No Directive annotation found on ToasterContainerComponent ; Zone: angular ; Task: Promise.then ; Value:

onActionCallback feature request

We are using this project as part of a web conferencing product. When you are busy teaching and someone makes a request to open their microphone, a modal popup message is very disruptive. Also, you may not want to open their microphone immediately... you may want to finish a thought before accepting their request.

Your toaster popup would be ideal if you could add an action button with a callback similar to onHideCallback. If the presenter clicks on the action button, then onActionCallback is fired and the microphone is opened. If the toast is dismissed, the request is ignored.

The API could be something like this:

var toast : Toast = {
    type: 'info',
    title: 'Mic Request',
    body: 'Stabzs wants to speak.  Open Mic?',
    showCloseButton: true,
    actionButton: 'Yes',
    onHideCallback: function() { console.log('no'); },
    onActionCallback: function() { console.log('yes'); }
};

this.toasterService.pop(toast);

We do not need more than 1 action, but you may want to consider it from the start and rather use this kind of an API:

var toast : Toast = {
    type: 'info',
    title: 'Mic Request',
    body: 'Stabzs wants to speak.  Open Mic?',
    showCloseButton: true,
    actions: [
      {text: 'Yes', callback: function() { console.log('yes'); } },
      {text: 'Ignore', callback: function() { console.log('ignored'); } }
    ],
    onHideCallback: function() { console.log('no'); }
};

this.toasterService.pop(toast);

Global container

Any chance we could have a global toaster-container (say in the root component), and fire toasts from child components using only the service injection ?
Thanks

ClickHandler is called twice on exit button press

Hi,

I try to handle toast clicks, so I attached a function to the ClickHandler :

    let toast: Toast = {
        type: 'info',
        title: title,
        body: 'Click here to cancel',
        showCloseButton: true,
        timeout: 9000,

        clickHandler: (toast , isCloseButton) => {
          console.log("isCloseButton : "+isCloseButton);
          return true;
        }
    };
    this.toastr.pop(toast);

But the function is called twice when the user press the exit button.

Have I missed something ?

timeout of 0 does not work

Hello, i have tried to override the timeout for errors to make them sticky and it does not work.

I have tried the below and no matter what, it goes away after 5 seconds.

    var toasterconfig : ToasterConfig = new ToasterConfig({timeout: {error:0 }});
    var toast : Toast = {
        type: "error",
        title: title,
        body: message,
        showCloseButton: true,
        toasterConfig: toasterconfig
    };

    this.toasterService.pop(toast);    


    var toast : Toast = {
        type: "error",
        title: title,
        body: message,
        showCloseButton: true,
        timeout: 0
    };
    this.toasterService.pop(toast);  

No Toaster Containers have been initialized to receive toasts.

I'm using angular2-toaster with angular-2 rc.2, and I get this error above. I have an example set up exactly like that on the front page, with the <toaster-container></toaster-container> in the template.

Need a programmatic way to remove a toast

toasterService.pop returns a toast object.

I need a way to close / remove that toast at a later time when it is not applicable anymore. There might be multiple toasts displayed, but I need to remove a specific item.

For example, the toast may indicate that someone is requesting that their microphone is opened, but then change their mind. So it is important to remove the toast when it is not valid anymore.

Way too awesome!

Hey there, I didn't know how else to contact you but I wanted to say thank you! I just upped my app to the Angular 2 rc and totally thought I'd have to rip out the toaster for now. I was really impressed to see that you've already made the move.

Thanks for being an absolute gem, you've made my life very nice!

Warnings on missing components

Currently I'm getting some warnings in the component:

WARNING in ./~/angular2-toaster/src/toaster-container.component.js
Cannot find source file 'toaster-container.component.ts': Error: Cannot resolve 'file' or 'directory' ./toaster-container.component.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src

WARNING in ./~/angular2-toaster/src/toaster.service.js
Cannot find source file 'toaster.service.ts': Error: Cannot resolve 'file' or 'directory' ./toaster.service.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src

WARNING in ./~/angular2-toaster/src/bodyOutputType.js
Cannot find source file 'bodyOutputType.ts': Error: Cannot resolve 'file' or 'directory' ./bodyOutputType.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src

WARNING in ./~/angular2-toaster/src/toast.js
Cannot find source file 'toast.ts': Error: Cannot resolve 'file' or 'directory' ./toast.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src

WARNING in ./~/angular2-toaster/src/toaster-config.js
Cannot find source file 'toaster-config.ts': Error: Cannot resolve 'file' or 'directory' ./toaster-config.ts in /Users/maximilianalexander/edenwebpack/node_modules/angular2-toaster/src
`

No Directive annotation found on ToasterContainerComponen

Hi, got this error any idea ?

Color change proposed

This is an awesome project, but the colors can be more modern looking. It would be nice to use the Bootstrap colors as many project integrate with it already.
http://getbootstrap.com/components/#alerts-examples

Here is my CSS hack to change the colors:

#toast-container > .toast-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.toast-success .toast-close-button {
    color: #3c763d;

}#toast-container > .toast-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.toast-info .toast-close-button {
    color: #31708f;

}#toast-container > .toast-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.toast-warning .toast-close-button {
    color: #8a6d3b;
}

#toast-container > .toast-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.toast-error .toast-close-button {
    color: #a94442;
}

.toaster-icon {
    filter: invert(0.5);
}
#toast-container > div {
    opacity: 1;
    border: 1px solid transparent;
    border-radius: 4px;
}

SystemJS shouldn't be supported

Since I'm using Webpack at the moment, SystemJS seems redundant.
I think that's a project specific choice to be made. Since this is a 3rd party module, shouldn't it just conform to the typescript es6 export format?

Cannot read property 'unsubscribe' of undefined!!!

I use authorization component which checks if user is authorize to see protected page where I have and SimpleNotificationsComponent. In case of unauthorized attempt, the authorization component uses Router and navigates to login page. And in that case I got:

Unhandled promise rejection TypeError: Cannot read property 'unsubscribe' of undefined(…)

which leads to NotificationComponent and:

ngOnDestroy()
{
this.addToastSubscriber.unsubscribe()
this.clearToastsSubscriber.unsubscribe()
}

It is probably because of component not being initializes in ngOnInit.

Cannot find source file

WARNING in ./~/angular2-toaster/lib/bodyOutputType.js
Cannot find source file '../src/bodyOutputType.ts': Error: Cannot resolve 'file' or 'directory' ../src/bodyOutputType.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib

WARNING in ./~/angular2-toaster/lib/toast.js
Cannot find source file '../src/toast.ts': Error: Cannot resolve 'file' or 'directory' ../src/toast.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib

WARNING in ./~/angular2-toaster/lib/toaster-config.js
Cannot find source file '../src/toaster-config.ts': Error: Cannot resolve 'file' or 'directory' ../src/toaster-config.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib

WARNING in ./~/angular2-toaster/lib/toaster-container.component.js
Cannot find source file '../src/toaster-container.component.ts': Error: Cannot resolve 'file' or 'directory' ../src/toaster-container.component.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib

WARNING in ./~/angular2-toaster/lib/toaster.service.js
Cannot find source file '../src/toaster.service.ts': Error: Cannot resolve 'file' or 'directory' ../src/toaster.service.ts in /Users/Mac/Documents/CODE/fontend-netvivu/node_modules/angular2-toaster/lib

MY app.ts

/*
 * Angular 2 decorators and services
 */
import {Component} from 'angular2/core';
import {RouteConfig, Router} from 'angular2/router';

import {Home} from './home/home';
import {HeaderComponent} from './header/header';
import {Admin} from './admin/admin';
import {ToasterContainerComponent, ToasterConfig} from 'angular2-toaster/angular2-toaster';
/*
 * App Component
 * Top Level Component
 */
@Component({
  selector: 'app',
  directives: [HeaderComponent, ToasterContainerComponent],
  providers: [],
  pipes: [],
  styles: [`
    main {
      font-size: 1rem;
      line-height: 1.5;
      color: #666;
      background-color: #ededed;
    }
    :global(body) {
      color: #666;
      background-color: #ededed;
    }
  `],
  template: `
    <header-component></header-component>
    <ToasterContainerComponent></ToasterContainerComponent>
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})
@RouteConfig([
  { path: '/', component: Home, name: 'Index' },
  { path: '/home', component: Home, name: 'Home' },
])

export class App {

  constructor() {
  }

  public toasterconfig: ToasterConfig =
  new ToasterConfig({
    showCloseButton: false,
    positionClass: "toast-top-center",
    tapToDismiss: true,
    timeout: 3000
  });
}

My webpack.config 👍

// @AngularClass

var webpack = require('webpack');
var helpers = require('./helpers');

var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
var ProvidePlugin = require('webpack/lib/ProvidePlugin');

var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
var HMR = helpers.hasProcessFlag('hot');
var autoprefixer = require('autoprefixer');

var metadata = {
  title: 'Cổng thông tin game lớn nhất Việt Nam |  NETVIVU',
  baseUrl: '/',
  host: 'localhost',
  port: 3000,
  ENV: ENV,
  HMR: HMR
};
/*
 * Config
 * with default values at webpack.default.conf
 */
module.exports = {
  // static data for index.html
  metadata: metadata,
  devtool: 'cheap-module-eval-source-map',
  // cache: true,
  debug: true,
  // devtool: 'eval' // for faster builds use 'eval'

  // our angular app
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'] // <-- include .scss
  },

  // Config for our build files
  output: {
    path: helpers.root('dist'),
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },

  module: {
    preLoaders: [
      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
      // TODO(gdi2290): `exclude: [ helpers.root('node_modules/rxjs') ]` fixed with rxjs 5 beta.3 release
      { test: /\.js$/, loader: "source-map-loader", exclude: [helpers.root('node_modules/rxjs')] }
    ],
    loaders: [
      // Support for .ts files.
      { test: /\.ts$/, lo
```ader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/] },

      // Support for *.json files.
      { test: /\.json$/, loader: 'json-loader' },

      // Support for CSS as raw text
      { test: /\.css$/, loader: 'raw-loader' },

      // support for .html as raw text
      { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] },
// if you add a loader include the resolve file extension above

      { test: /\.scss$/, loaders: ['raw-loader', 'sass-loader?sourceMap'] },

      // { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000', exclude: [helpers.root('node_modules')] },

      // Bootstrap 4
      { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery', exclude: [helpers.root('node_modules')] },

      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },

      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  },

  // sassResources: path.resolve(__dirname, "./node_modules/bootstrap/scss"),

  postcss: [autoprefixer], // <--- postcss
  plugins: [
    new ForkCheckerPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'vendor', 'polyfills'], minChunks: Infinity }),
    // static assets
    new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
    // generating html
    new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none' }),
    // Environment helpers (when adding more properties make sure you include them in custom-typings.d.ts)
    new webpack.DefinePlugin({
      'ENV': JSON.stringify(metadata.ENV),
      'HMR': HMR
    }),
    // jQuery, Tether
    new ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      "Tether": 'tether',
      "window.Tether": "tether",
      "CKEDITOR": "CKEDITOR"
    })
  ],

  // Other module loader config

  // our Webpack Development Server config
  tslint: {
    emitErrors: false,
    failOnHint: false,
    resourcePath: 'src',
  },
  devServer: {
    port: metadata.port,
    host: metadata.host,
    historyApiFallback: true,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },
  node: {
    global: 'window',
    process: true,
    crypto: 'empty',
    module: false,
    clearImmediate: false,
    setImmediate: false
  }
};

Incompatible with RC.6

The package is currently incompatible with RC.6 of Angular 2 due to the removal of ComponentResolver and the renaming of DomSanitizationService to DomSanitizer

Placing custom bottom with method call in the toaster body

I tried the following code:

var toast : Toast = {
                type: 'info',
                title: 'Check',
                body: 'Are you sure you want to do this?<br/><button md-button (click)="freeUser()">I'm sure</button>',
                bodyOutputType: BodyOutputType.TrustedHtml
                };
            this.toasterService.pop(toast);

Unfortunetly the click event not working, so my question is, if there is any way to make custom button with some action in a toast body?

Template Parse Errors

Any ideas on how to resolve this?

This template parse error is from ToastComponent@7:16

Thanks a lot for your help!

Cheers,
Jay Kan

Zone.js exception

When using angular2-toaster with the latest version of angular 2 and zone.js, an exception is thrown when removeToast() is called in the callback of the SetTimeout() function. The reason is because removeToast is calling clearTimeout which the timeout is no longer registered because it already expired.

I resolved this by changing:
toast.timeoutId = window.setTimeout(() => {
this.removeToast(toast);
}, timeout);

to:
toast.timeoutId = window.setTimeout(() => {
toast.timeoutId = null;
this.removeToast(toast);
}, timeout);

NgModule Documentation not complete/right?

Maybe I'm missing something but I guess the documentation is wrong. First you should import Component to use the @component Annotation. Then it's always saying that ToasterModule "has no exportet member".

Am I missing something?

Custom image on toast

As I've checked in the inspiration example located at http://codeseven.github.io/toastr/demo.html,
using inside the toast content shows an image. While I've been trying to do that in this module, I got the following:

Is there any option to implement images in a toast or this feature is not yet implemented?

Can't load angular-toaster with default angular.io "Getting started" html

Hello,

I have followed angular.io "Get started" guide which notes the following SystemJS usage in index.html:

    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

With that configuration I built fairly simple working code. Unfortunately, when I try to use angular2-toaster (I have created node_modules/angular2-toaster folder and copy/paste "lib" folder as well as angular2-toaster.js file), I don't know how to change that script in order to load it. I tried to add "map" property as seen in your demo\index.html with no success:

        System.config({
            packages: {
                app: {
                    format: "register",
                    defaultExtension: "js"
                }
            },
            map: {
                'angular2-toaster': 'node_modules/angular2-toaster'
            }
        });
        System.import('app/main')
              .then(null, console.error.bind(console));

What happens is that I can see the browser makes request to http://localhost/node_modules/angular2-toaster/angular2-toaster with no ".js" extension which fails.

Could you explain how to load angular2-toaster by using angular.io default index.html SystemJS usage ?

Missing metadata.json files for AoT compilation

Currently the library does not support AoT compilation due to missing metadata.json files that need to be included along with d.ts-files.

See:

https://github.com/orizens/angular2-infinite-scroll/issues/77#issuecomment-245027350
angular/angular#11262 (comment)
angular/angular#11262 (comment)

please, add online demo or a plunker example.

RC.3 Support

Please update dependencies.

route navigate after pop

I have a situation where I issue the pop, and then issue a route navigate. The toast message doesn't display with the route. When I remove the route it works. Any ideas how to get around this?

Exception when calling ngOnDestroy

When I navigate away from the component app throws exception complaining dispose() function is undefined:

EXCEPTION: TypeError: this.addToastSubscriber.dispose is not a function. (In 'this.addToastSubscriber.dispose()', 'this.addToastSubscriber.dispose' is undefined)

here is the code location:
https://github.com/Stabzs/Angular2-Toaster/blob/master/src/toaster-container.component.ts#L219

btw thanks for putting up this awesome project!

TypeError: Cannot read property 'pop' of undefined

import {Component, OnInit, OnDestroy} from "@angular/core";
import {WebSocketService} from "../services/websocket.service";
import {ActivatedRoute} from '@angular/router';
import {Subscription} from "rxjs/Rx";
import {ToasterContainerComponent, ToasterService} from 'angular2-toaster/angular2-toaster';
import {User} from "../../client/user.model";


@Component({
    selector: 'main',
    template: `main`,
    providers: [WebSocketService, ToasterService],
    directives: [ToasterContainerComponent]
})
export class MainComponent implements OnInit, OnDestroy {

    private sub:Subscription;
    private user:User;
    private toasterService:ToasterService;

    constructor(private route:ActivatedRoute,
                private ws:WebSocketService,
                toasterService:ToasterService) {
        this.user = new User();
        this.toasterService = toasterService;
    }

    ngOnInit() {
        this.sub = this.route
            .params
            .subscribe(params => {
                this.user.room = params['room'];
                this.user.name = params['name'];
                this.user.lastname = params['lastname'];
            });

        this.init();
    }

    init() {
        this.ws = new WebSocketService();
        this.ws.run(this.onMessage);

        setTimeout(() =>
            this.ws.send({
                name: this.user.name,
                lastname: this.user.lastname,
                room: this.user.room,
                action: 'client_go_test'
            }), 200);
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }

    onMessage(event:MessageEvent) {
        console.log('onMessage');
        let routes:any = {
            'go_test': function (response) {
                console.log(response)
            },
            'client_test_not_found': function (response) {
                console.log(this.toaserService);
                this.toasterService.pop(
                    'error',
                    response,
                    {
                        showCloseButton: true,
                        timeout: 5000
                    });
            }
        };

        let data = JSON.parse(event.data);

        if (routes.hasOwnProperty(data.action)) {
            routes[data.action](data.response);
        }
    }
}

error on line this.toasterService.pop(

Update to Angular RC4

Can you please update? I appreciate it very much!

Angular 2 beta 17 console warning

Hey,

Just wanted to shoot over an issue caused by a "breaking" change in beta 17

Inside of structural directives that declare local variables, such as *ngFor, usage of #... is deprecated. Use let instead.
(ref https://github.com/angular/angular/blob/master/CHANGELOG.md)

The following is the new warning caused by the Angular2-Toaster container component template.

Template parse warnings:
"#" inside of expressions is deprecated. Use "let" instead! ("="[toasterconfig.positionClass, toasterconfig.animationClass]" class="ng-animate">
<div [ERROR ->]*ngFor="#toast of toasts" class="toast" [ngClass]="toasterconfig.typeClasses[toast.type]" (click)="cl"): ToasterContainerComponent@2:17

Should be a simple fix & I'd be happy to help with a PR! Thanks!

Error: Unexpected value 'ToasterModule' imported by the module 'AppModule'

When compiling with @Angular/Compiler-cli it throws Error: Unexpected value 'ToasterModule' imported by the module 'AppModule'

Angular 2 RC6
ngc -p tsconfig.json

Cant run any of your code: exports not defined

Trying to run your component and get this error right from app start:

i get exports not defined:

exports.BodyOutputType = require('./lib/bodyOutputType').BodyOutputType;
exports.Toast = require('./lib/toast').Toast;
exports.ToasterConfig = require('./lib/toaster-config').ToasterConfig;
exports.ToasterContainerComponent = require('./lib/toaster-container.component').ToasterContainerComponent;
exports.ToasterService = require('./lib/toaster.service').ToasterService;

I am including your script in a combined output script named common.js
it is bundled with the following scripts

 createLibFolderObj("systemjs", "systemjs/dist/system.src.js"),
        createLibFolderObj("angular2", "angular2/bundles/angular2.dev.js"),
        createLibFolderObj("angular2", "angular2/bundles/router.dev.js"),
        createLibFolderObj("angular2", "angular2/bundles/http.dev.js"),        
        createLibFolderObj("rxjs", "rxjs/bundles/Rx.js"),
        createLibFolderObj("toastr", "angular2-toaster/angular2-toaster.js")

Any ideas what could be wrong. from the limited examples provided i have eveything setup as suggested.

My current versions are:

 "angular2": "^2.0.0-beta.11",
        "bootstrap": "^3.3.6",
        "es6-promise": "^3.1.2",
        "es6-shim": "^0.35.0",
        "font-awesome": "^4.5.0",
        "reflect-metadata": "0.1.3",
        "rxjs": "^5.0.0-beta.3",
        "systemjs": "^0.19.24",
        "zone.js": "^0.6.5",
        "angular2-toaster": "0.1.0-beta.2"

Angular2-Toaster installs own version of Angular 2

Hi there!
Can you tell me why Angular 2 and RxJS is in "dependencies" instead of "peerDependencies" as it should be? Angular2-Toaster goes as a "plugin", not standalone service, right? Check https://github.com/valor-software/ng2-bootstrap/blob/development/package.json for example.

Use the toaster from a service

Hi,

first of all, thank you for this great library.
I want to show a toast for failed http-Requests thus I want to use it from a service.
Can I do this? Or is there a better way?

Regards

Webpack question

Hi, I'm new to webpack can you tell me how to link your scc using webpack?

No Directive annotation found on ToasterContainerComponent

Upgrading to Angular 2 rc.2 causes me to start getting the following error.

Reproduced in new clone of https://github.com/AngularClass/angular2-webpack-starter when following the Getting Started with Default Configuration instructions.

Toast TapToDismiss does not override the global config

If a toast defined a different value for tapToDismiss in its toasterConfig compared to the global configuration, this is ignored.

My use case: I normally do not want to allow tap To Dismiss, but on some toasts I would like to perform an action on click, but is currently not possible since tabToDismiss is set to false.

Alternatively, execute the clickHandler when present even if tabToDismiss is set to false, since this option by its name should only enable or disable the dismiss on click not the execution of a custom clickHandler

Thanks

Add removedToast observable

First of all thanks for this useful library!

It would be nice to have an observable in the ToasterService which notifies when a toast has been removed, regardless of the reason. It would the opposite of the addToast observable

I you like I could make a pr with this feature.

Getting Error: SyntaxError: Unexpected token <

Hi,
I've done the basic steps to install the toaster...

1. npm install angular2-toaster
2. Add the css.
3. import {ToasterContainerComponent, ToasterService} from 'angular2-toaster/angular2-toaster';
4. constructor(toasterService: ToasterService) {
   this.toasterService = toasterService;
   }

But I get the following error...
Error: SyntaxError: Unexpected token <

update to angular2 rc2

please update dependencies to angular2 rc2

import CORE_DIRECTIVES's missing

Missing import { Core_Directives } from '@angular/common'; line 44

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ngSwitchCase' since it isn't a known native property ("ngClass]="toast.toasterConfig.messageClass" [ngSwitch]="toast.bodyOutputType">
                <div [ERROR ->]*ngSwitchCase="bodyOutputType.Component" #componentBody></div>
                <div *ngSwitchCase="bo"): ToastComponent@5:21
Property binding ngSwitchCase not used by any directive on an embedded template ("div [ngClass]="toast.toasterConfig.messageClass" [ngSwitch]="toast.bodyOutputType">
                [ERROR ->]<div *ngSwitchCase="bodyOutputType.Component" #componentBody></div>
                <div *ngSwitchCas"): ToastComponent@5:16
Can't bind to 'ngSwitchCase' since it isn't a known native property ("           <div *ngSwitchCase="bodyOutputType.Component" #componentBody></div>
                <div [ERROR ->]*ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
                <div *ngSw"): ToastComponent@6:21
Property binding ngSwitchCase not used by any directive on an embedded template ("                <div *ngSwitchCase="bodyOutputType.Component" #componentBody></div>
                [ERROR ->]<div *ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
                <div "): ToastComponent@6:16
Can't bind to 'ngSwitchCase' since it isn't a known native property ("div *ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
                <div [ERROR ->]*ngSwitchCase="bodyOutputType.Default">{{toast.body}}</div>
            </div>
        </div>
"): ToastComponent@7:21
Property binding ngSwitchCase not used by any directive on an embedded template ("    <div *ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
                [ERROR ->]<div *ngSwitchCase="bodyOutputType.Default">{{toast.body}}</div>
            </div>
        </div>
"): ToastComponent@7:16

Timeout does not seem to work

Thanks for a great library!

The examples provided are clear and works great! However, the timeout does not seem to work and the popups do not disappear after 5 seconds. Even specifying a timeout does not work.

Is there a version targeting Angular 2 beta.15?

... as per issue title ... Thank you

Error in zone.js: More tasks executed then were scheduled.

When I run a toaster it's working but it is also trigger an error in zone.js
I'm using:

• Angular2 beta14
• angular2-toaster 0.2.0-beta.0
• RxJS 5.0.0-beta.2
• zone.js 0.6.11

browser_adapter.ts:73 Error: More tasks executed then were scheduled.
    at ZoneDelegate._updateTaskCount (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:398:24)
    at ZoneDelegate.invokeTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:369:27)
    at Zone.runTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:263:48)
    at ZoneTask.invoke (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:431:34)
  -------------   Elapsed: 5004 ms; At: Fri Apr 15 2016 08:17:01 GMT+0200 (CEST)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:1354:23)
    at ZoneDelegate.scheduleTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:342:50)
    at Zone.scheduleMacroTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:283:40)
    at https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:133:26
    at setTimeout (eval at createNamedFn (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:973:18), <anonymous>:3:37)
    at ToasterContainerComponent.configureTimer (http://localhost:8000/node_modules/angular2-toaster/lib/toaster-container.component.js:136:38)
    at ToasterContainerComponent.addToast (http://localhost:8000/node_modules/angular2-toaster/lib/toaster-container.component.js:113:14)
    at SafeSubscriber.eval [as _next] (http://localhost:8000/node_modules/angular2-toaster/lib/toaster-container.component.js:70:19)
  -------------   Elapsed: 2 ms; At: Fri Apr 15 2016 08:17:01 GMT+0200 (CEST)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:1354:23)
    at ZoneDelegate.scheduleTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:342:50)
    at Zone.scheduleMacroTask (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:283:40)
    at https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:133:26
    at setTimeout (eval at createNamedFn (https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js:973:18), <anonymous>:3:37)
    at ToasterService.popAsync (http://localhost:8000/node_modules/angular2-toaster/lib/toaster.service.js:31:9)
    at Home.ok (http://localhost:8000/app/mysew-app.js:63:35)
    at AbstractChangeDetector.ChangeDetector_Home_0.handleEventInternal (viewFactory_Home:131:21)

ReferenceError: Can't find variable: exports - karma

I'm getting this error when I am running my tests. I am using angular2-seed.

When running npm test I was initially getting: 404: /base/angular2-toaster/angular2-toaster.js

That issue was easily fixed by adding 'node_modules/angular2-toaster/angular2-toaster.js' to my karma.conf.js file.

After adding that, I began getting the error ReferenceError: Can't find variable: exports

Fix CI Build

Update test structure to run correctly on CI.

0.3.6-rc.5 not published to NPM

The current documentation for this module indicates the current version is 0.3.6-rc.5, however that version is not published to the public NPM registry.

Can this be published to NPM?

Error : callback.apply is not a function

Hi,
i've an error when i use Angular2-toaster with angular2 rc.0. The toaster appears and i have this exception in the console :
EXCEPTION: Error: Uncaught (in promise): TypeError: callback.apply is not a function
[...]

Thanks for your help,
best regards

Update to angular RC5 ?

I don't know if maybe we need to update toaster in to a module?