{"id":13480716,"url":"https://github.com/stabzs/Angular2-Toaster","last_synced_at":"2025-03-27T11:30:47.984Z","repository":{"id":4028665,"uuid":"51724220","full_name":"Stabzs/Angular2-Toaster","owner":"Stabzs","description":"Angular2-toaster is an asynchronous, non-blocking Angular Toaster Notification library","archived":false,"fork":false,"pushed_at":"2023-05-25T21:26:27.000Z","size":3754,"stargazers_count":334,"open_issues_count":41,"forks_count":93,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-10-29T17:14:00.391Z","etag":null,"topics":["angular","angular2","angular2-toaster","angular4","angular5","animation","aot-compilation","toast","toaster","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":"","scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Stabzs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-02-15T01:53:32.000Z","updated_at":"2024-10-24T08:33:34.000Z","dependencies_parsed_at":"2023-01-13T12:53:50.675Z","dependency_job_id":"f9ca1778-c1ec-4f0d-a9fb-aca658e4e28e","html_url":"https://github.com/Stabzs/Angular2-Toaster","commit_stats":{"total_commits":139,"total_committers":16,"mean_commits":8.6875,"dds":0.4388489208633094,"last_synced_commit":"0874f314e84cee08a0c924fc1a08e21713f1f58f"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stabzs%2FAngular2-Toaster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stabzs%2FAngular2-Toaster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stabzs%2FAngular2-Toaster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stabzs%2FAngular2-Toaster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Stabzs","download_url":"https://codeload.github.com/Stabzs/Angular2-Toaster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245835907,"owners_count":20680290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular2-toaster","angular4","angular5","animation","aot-compilation","toast","toaster","typescript"],"created_at":"2024-07-31T17:00:44.102Z","updated_at":"2025-03-27T11:30:47.960Z","avatar_url":"https://github.com/Stabzs.png","language":"TypeScript","readme":"# Angular2-Toaster\n\n**angular2-toaster** is an asynchronous, non-blocking, Ahead of Time Compilation-supported Angular Toaster Notification library \nlargely based off of [AngularJS-Toaster](https://github.com/jirikavi/AngularJS-Toaster).\n\n[![npm](https://img.shields.io/npm/v/angular2-toaster.svg?maxAge=3600?800=true)](https://www.npmjs.com/package/angular2-toaster)\n[![npm](https://img.shields.io/npm/dt/angular2-toaster.svg?cache=true)](https://www.npmjs.com/package/angular2-toaster)\n[![Build Status](https://travis-ci.org/Stabzs/Angular2-Toaster.svg?branch=master)](https://travis-ci.org/Stabzs/Angular2-Toaster)\n[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master\u0026b=11.0.0)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)\n\nVersion ^11.0.0 has a number of new features, type definitions, and breaking changes.  Please review the \n[CHANGELOG](CHANGELOG.md/#11.0.0) for a list of features and breaking changes before upgrading.\n\nVersion ^5.0.0 requires either `.forRoot()` or `.forChild()` `ToasterModule` inclusion.  Please \nread the 5.x.x release notes and the `Getting Started` section before upgrading.\n\nVersion ^4.0.0 now supports @angular/animations, which is a breaking change. \nPlease read both the Getting Started and Animations sections before upgrading.\n\n\n# Demo\nA dynamic Angular and Typescript demo can be found at \n[this plunker](http://plnkr.co/edit/hkENUhos6q9fhiOHprXO?p=preview).\n\n\n# Getting Started\n\n## Installation:\n\n```bash\nnpm install angular2-toaster\n```\n\n## Import CSS\n\n### Copy or Link CSS\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/node_modules/angular2-toaster/toaster.css\" /\u003e\n```\nor\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/node_modules/angular2-toaster/toaster.min.css\" /\u003e\n```\n\n### Import CSS with Sass or Less\n```scss\n@import 'node_modules/angular2-toaster/toaster';\n```\n\n### Compile the Library's SCSS\n```scss\n@import 'node_modules/angular2-toaster/toaster';\n```\n\n\n## Import Library\n\n### Import via SystemJS\nWithin the `map` property of the `systemjs.config` file, add mappings for angular, rxjs \n(which is a dependency), and the angular2-toaster bundled umd file:\n\n```javascript\nmap: {\n      // angular bundles\n      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',\n      // ...\n      // other libraries\n      'rxjs':  'npm:rxjs',\n      'angular2-toaster': 'npm:angular2-toaster/bundles/angular2-toaster.umd.js'\n```\n\n### Import via Webpack\nSimply follow the `Getting Started` instructions to import the library.\n\n\n\n## Getting Started With Default Configuration - NgModule (Recommended):\n```typescript\nimport {NgModule, Component} from '@angular/core';\nimport {BrowserAnimationsModule} from '@angular/platform-browser/animations';\nimport {ToasterModule, ToasterService} from 'angular2-toaster';\nimport {Root} from './root.component'\n\n@NgModule({\n    imports: [BrowserAnimationsModule, ToasterModule.forRoot()],\n    declarations: [Root],\n    bootstrap: [Root]\n})\n\n@Component({\n    selector: 'root',\n    template: `\n            \u003ctoaster-container\u003e\u003c/toaster-container\u003e\n            \u003cbutton (click)=\"popToast()\"\u003epop toast\u003c/button\u003e`\n})\n\nexport class Root {\n    private toasterService: ToasterService;\n\n    constructor(toasterService: ToasterService) {\n        this.toasterService = toasterService;\n    }\n\n    popToast() {\n        this.toasterService.pop('success', 'Args Title', 'Args Body');\n    }\n}\n```\n`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.\n\nFor subsequent inclusions, use `ToasterModule.forChild()` to provide the `ToasterContainerComponent` only, ensuring that `ToasterService` is still held as a singleton at the root.\n\n## Getting Started with Default Configuration - Manual Component Inclusion (obsolete \u003e= 5.0.0):\n\n```typescript\nimport {Component} from '@angular/core';\nimport {BrowserAnimationsModule} from '@angular/platform-browser/animations';\nimport {ToasterContainerComponent, ToasterService} from 'angular2-toaster';\n\n@Component({\n    selector: 'root',\n    imports: [BrowserAnimationsModule],\n    directives: [ToasterContainerComponent],\n    providers: [ToasterService],\n    template: `\n        \u003ctoaster-container\u003e\u003c/toaster-container\u003e\n        \u003cbutton (click)=\"popToast()\"\u003epop toast\u003c/button\u003e`\n})\n\nclass Root {\n    private toasterService: ToasterService;\n    \n    constructor(toasterService: ToasterService) {\n        this.toasterService = toasterService;    \n    }\n    \n    popToast() {\n        this.toasterService.pop('success', 'Args Title', 'Args Body');\n    }\n}\n\nbootstrap(Root);\n```\n\n## Getting Started with Configuration Override:\n\n```typescript\nimport {Component} from '@angular/core';\nimport {BrowserAnimationsModule} from '@angular/platform-browser/animations';\nimport {ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';\n\n@Component({\n    selector: 'root',\n    imports: [BrowserAnimationsModule, ToasterModule.forRoot()],\n    template: `\n        \u003ctoaster-container [toasterconfig]=\"config\"\u003e\n        \u003c/toaster-container\u003e\n        \u003cbutton (click)=\"popToast()\"\u003epop toast\u003c/button\u003e`\n})\n\nclass Root {\n    private toasterService: ToasterService;\n    \n    constructor(toasterService: ToasterService) {\n        this.toasterService = toasterService;    \n    }\n    \n    public config: ToasterConfig = \n        new ToasterConfig({\n            showCloseButton: true, \n            tapToDismiss: false, \n            timeout: 0\n        });\n    \n    popToast() {\n        this.toasterService.pop('success', 'Args Title', 'Args Body');\n    }\n}\n\nbootstrap(Root);\n```\n\n\n## Asynchronous vs Synchronous ToasterService\n`ToasterService` exposes both a synchronous and asynchronous pop method in the form of `pop()` and \n`popAsync()` respectively.  \n\n`pop()` returns a concrete `Toast` instance after the toastId property has been hydrated and the \ntoast has been added to all receiving containers.\n\n`popAsync()` returns a hot `Observable\u003cToast\u003e` that may be subscribed to to receive multiple toast \nupdates.\n\n\n## Customize Toast arguments in pop\n```typescript\n\nvar toast: Toast = {\n    type: 'success',\n    title: 'close button',\n    showCloseButton: true\n};\n\nthis.toasterService.pop(toast);\n\n```\n\n## Clear Existing Toast\n`ToasterService` exposes a `clear` function that accepts two optional parameters: `toastId` and \n`toastContainerId`.\n\nThese parameters can be used to clear toasts by specific id, by container id, \nby both, or by neither.  If both parameters are omitted, all toasts in all containers will be \nremoved.\n\n```typescript\nvar toast = this.toasterService.pop('success', 'title', 'body');\nthis.toasterService.clear(toast.toastId, toast.toastContainerId);\n```\n\n\n## Animations\nStarting with version `4.0.0` and greater, Animation configuration is required, as described in the \n`Getting Started` section.\n\nTo add animations: \n\n- Install the `@angular/animations` npm package via \n`npm install @angular/animations`.\n- Add the `BrowserAnimationsModule` to your root module\n\n    ```typescript\n    import {NgModule, Component} from '@angular/core';\n    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';\n    import {ToasterModule} from 'angular2-toaster';\n    \n    @NgModule({\n        imports: [BrowserAnimationsModule, ToasterModule],\n        ...\n    ```\n\nIf you want to avoid bringing in an additional module solely for the sake of animations, you can \nexplicitly configure `angular2-toaster` to ignore animations.  To do so, import the \n`NoopAnimationsModule` instead:\n\n```typescript\nimport {NoopAnimationsModule} from '@angular/platform-browser/animations';\nimport {ToasterModule} from 'angular2-toaster';\n    \n@NgModule({\n    imports: [NoopAnimationsModule, ToasterModule],\n    ...\n```\n\nAngular Animations require [browsers](http://caniuse.com/#feat=web-animation) that support the [Web Animations Standard](https://w3c.github.io/web-animations/).\n\nIf you need to target a non-supported browser, a [polyfill](https://github.com/web-animations/web-animations-js) is required.\n\n\n# Configurable Options\n### Toast Types\nBy default, five toast types are defined via the `ToastType` type: 'error, 'info', 'wait', 'success', and 'warning'.\n\nThe existing toast type configurations can be overridden by passing a mapping object that uses the \nsame type names but overrides the style class:\n\n```typescript\ntemplate: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\npublic config: ToasterConfig = \n    new ToasterConfig({typeClasses: {\n      error: 'custom-toast-error',\n      info: 'custom-toast-info',\n      wait: 'custom-toast-wait',\n      success: 'custom-toast-success',\n      warning: 'custom-toast-warning'\n    }});\n```\n\nIn addition, the default options can be overridden, replaced, or expanded, by extending the toast type with a \ncustom type and passing a mapping object to the config, where the key corresponds to the toast type and the \nvalue corresponds to a custom class:\n\n**NOTE: When providing a custom type, both the typeClasses and iconClasses objects must be updated.\nIn the case where either are not provided, the toast type will fall back to the `defaultToastType` which \ndefaults to `info`.**\n```typescript\nimport {DefaultTypeClasses, DefaultIconClasses} from 'angular2-toaster';\ntype ExtendedToastType = ('partial-success') \u0026 ToastType;\n\ntemplate: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\nextendedTypeClasses = { ...DefaultTypeClasses, ...{ 'partial-success': 'toast-partial-success' }};\nextendedIconClasses = { ...DefaultIconClasses, ...{ 'partial-success': 'icon-partial-success' }};\n\npublic config: ToasterConfig = \n    new ToasterConfig({\n        typeClasses: \u003cExtendedToastType\u003ethis.extendedTypeClasses,\n        iconClasses: \u003cExtendedToastType\u003ethis.extendedIconClasses\n    });\n```\n\n### Animations\nThere are five animation styles that can be applied via the toasterconfig `animation` property: \n'fade', 'flyLeft', 'flyRight', 'slideDown', and 'slideUp'.  Any other value will disable animations.\n\n```typescript\ntemplate: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\npublic config: ToasterConfig = \n    new ToasterConfig({animation: 'fade'});\n```\n\n### Limit\nLimit is defaulted to null, meaning that there is no maximum number of toasts that are defined \nbefore the toast container begins removing toasts when a new toast is added.\n\nTo change this behavior, pass a \"limit\" option to the config:\n\n```typescript\ntemplate: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\npublic config: ToasterConfig = \n    new ToasterConfig({limit: 5});\n```\n\n### Tap to Dismiss\nBy default, the `tapToDismiss` option is set to true, meaning that if a toast is clicked anywhere \non the toast body, the toast will be dismissed.  This behavior can be overriden in the config so \nthat if set to false, the toast will only be dismissed if the close button is defined and clicked:\n\n```typescript\ntemplate: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\npublic config: ToasterConfig = \n    new ToasterConfig({tapToDismiss: false});\n```\n\n\n### Container Position\nThere are nine pre-built toaster container position configurations:\n\n```\n'toast-top-full-width', 'toast-bottom-full-width', 'toast-center',\n'toast-top-left', 'toast-top-center', 'toast-top-right',\n'toast-bottom-left', 'toast-bottom-center', 'toast-bottom-right'\n```\n\nBy 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:\n\n```typescript\ntemplate: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\npublic config: ToasterConfig = \n    new ToasterConfig({positionClass: 'toast-top-left'});\n```\n\n\n### Close Button\n\nThe Close Button's visibility can be configured at three different levels:\n\n* Globally in the config for all toast types:\n\n    ```typescript\n    template: \n        `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\n    public config: ToasterConfig = \n        new ToasterConfig({showCloseButton: true});\n    ```\n\n* Per info-class type:\nBy passing the close-button configuration as an object instead of a boolean, you can specify the global behavior an info-class type should have.\n\n    ```typescript\n    template: \n        `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\n    public config: ToasterConfig = \n        new ToasterConfig({\n            showCloseButton: { 'warning': true, 'error': false }\n        });\n    ```\n    \n    If a type is not defined and specified, the default behavior for that type is false.\n\n* Per toast constructed via Toast object creation:\n\n    ```typescript\n    var toast : Toast = {\n        type: 'error',\n        title: 'Title text',\n        body: 'Body text',\n        showCloseButton: true\n    };\n    \n    this.toasterService.pop(toast);\n    \n    ```\n    \n    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.\n\n\n### Close Html\n\nThe close button html can be overridden either globally or per toast call.\n\n - Globally:\n\n    ```typescript\n    template: \n        `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\n    public config: ToasterConfig = \n        new ToasterConfig({\n            closeHtml: '\u003cbutton\u003eClose\u003c/button\u003e'\n        });\n    ```\n\n - Per toast:\n\n    ```typescript\n    var toast : Toast = {\n        type: 'error',\n        title: 'Title text',\n        body: 'Body text',\n        showCloseButton: true,\n        closeHtml: '\u003cbutton\u003eClose\u003c/button\u003e'\n    };\n    \n    this.toasterService.pop(toast);\n    ```\n\n### Newest Toasts on Top\nThe `newestOnTop` option is defaulted to true, adding new toasts on top of other existing toasts. \nIf changed to false via the config, toasts will be added to the bottom of other existing toasts.\n\n```typescript\ntemplate: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\npublic config: ToasterConfig = \n    new ToasterConfig({newestOnTop: false});\n```\n\n### Timeout\nBy default, toasts have a timeout setting of 5000, meaning that they are removed after 5000 \nmilliseconds.  \n\nIf the timeout is set to anything other than a number greater than 0, the toast will be considered\n \"sticky\" and will not automatically dismiss.\n\nThe timeout can be configured at three different levels:\n\n* Globally in the config for all toast types:\n  ```typescript\n  template: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\n  public config: ToasterConfig = \n        new ToasterConfig({timeout: 2000});\n  ```\n\n* Per info-class type:\nBy passing the timeout config option as an object instead of a number, you can specify the global \nbehavior an info-class type should have.\n\n  ```\n  template: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\n  public config: ToasterConfig = \n      new ToasterConfig({timeout: {error:1000});\n  ```\nIf a type is not defined and specified, a timeout will not be applied, making the toast \"sticky\".\n\n* Per toast constructed via toaster.pop('success', \"title\", \"text\"):\n  ```typescript\n  var toast : Toast = {\n      type: 'error',\n      title: 'Title text',\n      body: 'Body text',\n      showCloseButton: true,\n      closeHtml: '\u003cbutton\u003eClose\u003c/button\u003e'\n  };\n        \n  this.toasterService.pop(toast);\n  ```\n\n### Prevent Timeout on Mouseover\nBy default, all toasts are dismissed when their timer expires, even if you mouse over the toast.  \nThis can be overriden via the container's config.\n\n```typescript\ntemplate: \n    `\u003ctoaster-container [toasterconfig]=\"config\"\u003e\u003c/toaster-container\u003e`\n\npublic config: ToasterConfig = \n    new ToasterConfig({mouseoverTimerStop: false});\n```\n\n\n### Body Output Type\nThere are three different types of body renderings that can be passed via the \n`toast.bodyOutputType` argument: 'Default', 'TrustedHtml', and 'Component'. If a `bodyOutputType` \nis not provided, it will be defaulted to 'Default'.\n\n* Default: The `body` argument will be directly interpolated as text content.  If html is passed \n in the `body` argument, it will be encoded and rendered as text.\n \n* TrustedHtml: The `body` argument will be parsed and rendered as html content.\n  ```typescript\n  import {BodyOutputType} from 'angular2-toaster';\n  var toast : Toast = {\n      type: 'error',\n      title: 'Title text',\n      body: '\u003ch4\u003eBody text\u003c/h4\u003e',\n      bodyOutputType: BodyOutputType.TrustedHtml\n  };\n            \n  this.toasterService.pop(toast);\n  ```\n\n* Component: The `body` argument is the name of the component class to be rendered as the content \nof the toast.\n  ```typescript\n  import {BodyOutputType} from 'angular2-toaster';\n  \n  @Component({\n    selector: 'dynamic-component',\n    template: `\u003cdiv\u003eloaded via component\u003c/div\u003e`\n  })\n  class DynamicComponent { }\n  \n  var toast : Toast = {\n      type: 'error',\n      title: 'Title text',\n      body: DynamicComponent,\n      bodyOutputType: BodyOutputType.Component\n  };\n            \n  this.toasterService.pop(toast);\n  ```\n\n  The Component BodyOutputType offers the additional flexibilty of attaching the toast instance to \n  your component.  It is recommended that you expose a public property on your component for type \n  safe access to the toast instance if you need to consume it inside of your component.  \n  Mutation of the toast instance is not recommended.\n\n\n### Progress Bar\nA progress bar can be enabled per toast via the `progressBar` property.  If set to true, a progress bar will be \ndisplayed that indicates how much time is remaining for the toast before it is automatically dismissed.\n\nThe progress bar has two directions: `decreasing` or right-to-left and `increasing`, or left-to-right.  While defaulted \nto `decreasing`, it can be overridden per toast:\n\n```typescript\nvar toast: Toast = {\n  type: 'success',\n  progressBar: true,\n  progressBarDirection: 'increasing'  \n};\n\nthis.toasterService.pop(toast);\n```\n\n\n### On Show Callback\nAn onShow callback function can be attached to each toast instance.  The callback will be invoked upon toast add.\n\n```typescript\nvar toast: Toast = {\n  type: 'success',\n  title: 'parent',\n  onShowCallback: (toast) =\u003e this.toasterService.pop('success', 'invoked from ' + toast.title + ' onShow callback')  \n};\n\nthis.toasterService.pop(toast);\n```\n\n### On Hide Callback\nAn onHide callback function can be attached to each toast instance.  The callback will be invoked upon toast removal.\n\n```typescript\nvar toast: Toast = {\n  type: 'success',\n  title: 'parent',\n  onHideCallback: (toast) =\u003e this.toasterService.pop('success', 'invoked from ' + toast.title + ' onHide callback')  \n};\n\nthis.toasterService.pop(toast);\n```\n\n### On Click Callback\nAn onClick callback function can be attached to each toast instance.  The callback will be invoked upon the toast being \nclicked, even if the click is the close button.  The callback will be invoked before the toast is removed.\n\n```typescript\nvar toast: Toast = {\n  type: 'success',\n  title: 'parent',\n  onClickCallback: (toast) =\u003e this.toasterService.pop('success', 'invoked from ' + toast.title + ' onClick callback')  \n};\n\nthis.toasterService.pop(toast);\n```\n\n\n# Building the Source\nIn order to build Angular2-Toaster for development, you will need to have Git and Node.js installed.\n\nClone a copy of the repo:\n\n```bash\ngit clone https://github.com/stabzs/Angular2-Toaster.git\n```\n\nIn the cloned directory, run:\n```bash\nnpm install\n```\n\nRun Angular AoT compiler:\n```bash\nnpm run build\n```\n\nRun Karma test instance with coverage report:\n```bash\nng test angular2-toaster --code-coverage\n```\n\n# Frequently Asked Questions and Issues\n## I get the `No Toaster Containers have been initialized to receive toasts.` error\n\nYou have not properly initialized a toaster container instance before trying to publish a toast. \nMake sure that you have rendered the `toaster-container` component and that you are importing \nthe `ToasterModule` with `ToasterModule.forRoot()`.\n\n## Toasts are not displayed when popped from an error handler\nThe `handleError` function is executed outsize of an Angular zone.  You need to \nexplicitly tell Angular to run the pop call within the context of a zone.\n\n```TypeScript\nexport class AppErrorHandler implements ErrorHandler {\n    constructor(\n        private toasterService: ToasterService,\n        private ngZone : NgZone) { }\n\n    handleError(error: any): void {\n        this.ngZone.run(() =\u003e {\n            this.toasterService.pop('error', \"Error\", error);\n        });  \n    }\n}\n```\n(See this great [Stack Overflow Answer]( https://stackoverflow.com/questions/44975477/angular2-ng-toasty-errorhandler) for more details).\n\n\n## Author\n[Stabzs](stabzssoftware@gmail.com)\n\n## Credits\nRewritten from https://github.com/jirikavi/AngularJS-Toaster\n\nInspired by http://codeseven.github.io/toastr/demo.html.\n\n## Copyright\nCopyright © 2016-2020 Stabzs.\n\n\n## Licence\n\nThis project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info.","funding_links":[],"categories":["Uncategorized","UI Components","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Notification","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstabzs%2FAngular2-Toaster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstabzs%2FAngular2-Toaster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstabzs%2FAngular2-Toaster/lists"}