{"id":13480722,"url":"https://github.com/akserg/ng2-toasty","last_synced_at":"2025-04-13T02:26:11.614Z","repository":{"id":57125059,"uuid":"52021957","full_name":"akserg/ng2-toasty","owner":"akserg","description":"Angular2 Toasty component shows growl-style alerts and messages for your app.","archived":false,"fork":false,"pushed_at":"2020-08-25T19:52:28.000Z","size":8680,"stargazers_count":282,"open_issues_count":30,"forks_count":101,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-12T20:04:29.981Z","etag":null,"topics":["angular","angular2","angular4","growl","toasty"],"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":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akserg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-18T16:37:11.000Z","updated_at":"2024-12-01T16:30:42.000Z","dependencies_parsed_at":"2022-08-24T01:00:51.248Z","dependency_job_id":null,"html_url":"https://github.com/akserg/ng2-toasty","commit_stats":null,"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akserg%2Fng2-toasty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akserg%2Fng2-toasty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akserg%2Fng2-toasty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akserg%2Fng2-toasty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akserg","download_url":"https://codeload.github.com/akserg/ng2-toasty/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244153353,"owners_count":20406997,"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","angular4","growl","toasty"],"created_at":"2024-07-31T17:00:44.156Z","updated_at":"2025-03-28T03:12:41.447Z","avatar_url":"https://github.com/akserg.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","angular","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"],"readme":"# Angular 2 Toasty [![npm version](https://badge.fury.io/js/ng2-toasty.svg)](https://badge.fury.io/js/ng2-toasty) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-toasty.svg?style=flat-square)](https://www.npmjs.com/package/ng2-toasty)\nAngular2 Toasty component shows growl-style alerts and messages for your application.\n\n[![Build Status](https://travis-ci.org/akserg/ng2-toasty.svg?branch=master)](https://travis-ci.org/akserg/ng2-toasty) \n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) \n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) \n[![Dependency Status](https://david-dm.org/akserg/ng2-toasty.svg)](https://david-dm.org/akserg/ng2-toasty)\n[![devDependency Status](https://david-dm.org/akserg/ng2-toasty/dev-status.svg)](https://david-dm.org/akserg/ng2-toasty#info=devDependencies)\n[![Known Vulnerabilities](https://snyk.io/test/github/akserg/ng2-toasty/badge.svg)](https://snyk.io/test/github/akserg/ng2-toasty)\n\nFollow me [![twitter](https://img.shields.io/twitter/follow/akopkokhyants.svg?style=social\u0026label=%20akopkokhyants)](https://twitter.com/akopkokhyants) to be notified about new releases.\n\n_Some of these APIs and Components are not final and are subject to change!_\n\n## Installation\n```sh\nnpm install ng2-toasty --save\n```\n\n## Demo\nSimple examples using ng2-dnd:\n- with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)\n- with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)\n\nOnline demo available [here](http://akserg.github.io/ng2-webpack-demo)\n\nPlunker demo available [here](http://plnkr.co/edit/M2rQVb)\n\n## Usage\nIf you use SystemJS to load your files, you might have to update your config:\n\n```js\nSystem.config({\n    map: {\n        'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.js'\n    }\n});\n```\n\n#### 1. Update the markup\n- Import style into your web page. Choose one of the following files;\n  - `style-default.css` - Contains DEFAULT theme\n  - `style-bootstrap.css` - Contains Bootstrap 3 theme\n  - `style-material.css` - Contains Material Design theme\n- Assign the selected theme name [`default`, `bootstrap`, `material`] to the `theme` property of the instance of ToastyConfig.\n- Add `\u003cng2-toasty\u003e\u003c/ng2-toasty\u003e` tag in template of your application component.\n\n#### 2. Import the `ToastyModule`\nImport `ToastyModule.forRoot()` in the NgModule of your application. \nThe `forRoot` method is a convention for modules that provide a singleton service.\n\n```ts\nimport {BrowserModule} from \"@angular/platform-browser\";\nimport {NgModule} from '@angular/core';\nimport {ToastyModule} from 'ng2-toasty';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        ToastyModule.forRoot()\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nIf you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules), \ndon't forget that you can use it to export the `ToastyModule` that you imported in order to avoid having to import it multiple times.\n\n```ts\n@NgModule({\n    imports: [\n        BrowserModule,\n        ToastyModule.forRoot()\n    ],\n    exports: [BrowserModule, ToastyModule],\n})\nexport class SharedModule {\n}\n```\n\n#### 3. Use the `ToastyService` for your application\n- Import `ToastyService` from `ng2-toasty` in your application code:\n\n```js\nimport {Component} from '@angular/core';\nimport {ToastyService, ToastyConfig, ToastOptions, ToastData} from 'ng2-toasty';\n\n@Component({\n    selector: 'app',\n    template: `\n        \u003cdiv\u003eHello world\u003c/div\u003e\n        \u003cbutton (click)=\"addToast()\"\u003eAdd Toast\u003c/button\u003e\n        \u003cng2-toasty\u003e\u003c/ng2-toasty\u003e\n    `\n})\nexport class AppComponent {\n    \n    constructor(private toastyService:ToastyService, private toastyConfig: ToastyConfig) { \n        // Assign the selected theme name to the `theme` property of the instance of ToastyConfig. \n        // Possible values: default, bootstrap, material\n        this.toastyConfig.theme = 'material';\n    }\n    \n    addToast() {\n        // Just add default Toast with title only\n        this.toastyService.default('Hi there');\n        // Or create the instance of ToastOptions\n        var toastOptions:ToastOptions = {\n            title: \"My title\",\n            msg: \"The message\",\n            showClose: true,\n            timeout: 5000,\n            theme: 'default',\n            onAdd: (toast:ToastData) =\u003e {\n                console.log('Toast ' + toast.id + ' has been added!');\n            },\n            onRemove: function(toast:ToastData) {\n                console.log('Toast ' + toast.id + ' has been removed!');\n            }\n        };\n        // Add see all possible types in one shot\n        this.toastyService.info(toastOptions);\n        this.toastyService.success(toastOptions);\n        this.toastyService.wait(toastOptions);\n        this.toastyService.error(toastOptions);\n        this.toastyService.warning(toastOptions);\n    }\n}\n```\n\n#### 4. How dynamically update title and message of a toast\nHere is an example of how to dynamically update message and title of individual toast:\n\n```js\nimport {Component} from '@angular/core';\nimport {ToastyService, ToastyConfig, ToastyComponent, ToastOptions, ToastData} from 'ng2-toasty';\nimport {Subject, Observable, Subscription} from 'rxjs/Rx';\n\n@Component({\n    selector: 'app',\n    template: `\n        \u003cdiv\u003eHello world\u003c/div\u003e\n        \u003cbutton (click)=\"addToast()\"\u003eAdd Toast\u003c/button\u003e\n        \u003cng2-toasty\u003e\u003c/ng2-toasty\u003e\n    `\n})\nexport class AppComponent {\n    \n    getTitle(num: number): string {\n        return 'Countdown: ' + num;\n    }\n\n    getMessage(num: number): string {\n        return 'Seconds left: ' + num;\n    }\n    \n    constructor(private toastyService:ToastyService) { }\n    \n    addToast() {\n        let interval = 1000;\n        let timeout = 5000;\n        let seconds = timeout / 1000;\n        let subscription: Subscription;\n        \n        let toastOptions: ToastOptions = {\n            title: this.getTitle(seconds),\n            msg: this.getMessage(seconds),\n            showClose: true,\n            timeout: timeout,\n            onAdd: (toast: ToastData) =\u003e {\n                console.log('Toast ' + toast.id + ' has been added!');\n                // Run the timer with 1 second iterval\n                let observable = Observable.interval(interval).take(seconds);\n                // Start listen seconds beat\n                subscription = observable.subscribe((count: number) =\u003e {\n                    // Update title of toast\n                    toast.title = this.getTitle(seconds - count - 1);\n                    // Update message of toast\n                    toast.msg = this.getMessage(seconds - count - 1);\n                });\n\n            },\n            onRemove: function(toast: ToastData) {\n                console.log('Toast ' + toast.id + ' has been removed!');\n                // Stop listenning\n                subscription.unsubscribe();\n            }\n        };\n\n        switch (this.options.type) {\n            case 'default': this.toastyService.default(toastOptions); break;\n            case 'info': this.toastyService.info(toastOptions); break;\n            case 'success': this.toastyService.success(toastOptions); break;\n            case 'wait': this.toastyService.wait(toastOptions); break;\n            case 'error': this.toastyService.error(toastOptions); break;\n            case 'warning': this.toastyService.warning(toastOptions); break;\n        }\n    }\n}\n```\n\n#### 5. How to close specific toast\nHere is an example of how to close an individual toast:\n\n```js\nimport {Component} from '@angular/core';\nimport {ToastyService, ToastyConfig, ToastyComponent, ToastOptions, ToastData} from 'ng2-toasty';\nimport {Subject, Observable, Subscription} from 'rxjs/Rx';\n\n@Component({\n    selector: 'app',\n    template: `\n        \u003cdiv\u003eHello world\u003c/div\u003e\n        \u003cbutton (click)=\"addToast()\"\u003eAdd Toast\u003c/button\u003e\n        \u003cng2-toasty\u003e\u003c/ng2-toasty\u003e\n    `\n})\nexport class AppComponent {\n    \n    getTitle(num: number): string {\n        return 'Countdown: ' + num;\n    }\n\n    getMessage(num: number): string {\n        return 'Seconds left: ' + num;\n    }\n    \n    constructor(private toastyService:ToastyService) { }\n    \n    addToast() {\n        let interval = 1000;\n        let subscription: Subscription;\n        \n        let toastOptions: ToastOptions = {\n            title: this.getTitle(0),\n            msg: this.getMessage(0),\n            showClose: true,\n            onAdd: (toast: ToastData) =\u003e {\n                console.log('Toast ' + toast.id + ' has been added!');\n                // Run the timer with 1 second iterval\n                let observable = Observable.interval(interval);\n                // Start listen seconds beat\n                subscription = observable.subscribe((count: number) =\u003e {\n                    // Update title of toast\n                    toast.title = this.getTitle(count);\n                    // Update message of toast\n                    toast.msg = this.getMessage(count);\n                    // Extra condition to hide Toast after 10 sec\n                    if (count \u003e 10) {\n                        // We use toast id to identify and hide it\n                        this.toastyService.clear(toast.id);\n                    }\n                });\n\n            },\n            onRemove: function(toast: ToastData) {\n                console.log('Toast ' + toast.id + ' has been removed!');\n                // Stop listenning\n                subscription.unsubscribe();\n            }\n        };\n\n        switch (this.options.type) {\n            case 'default': this.toastyService.default(toastOptions); break;\n            case 'info': this.toastyService.info(toastOptions); break;\n            case 'success': this.toastyService.success(toastOptions); break;\n            case 'wait': this.toastyService.wait(toastOptions); break;\n            case 'error': this.toastyService.error(toastOptions); break;\n            case 'warning': this.toastyService.warning(toastOptions); break;\n        }\n    }\n}\n```\n\n#### 6. Customize the `ng2-toasty` for your application in template\nYou can use the following properties to customize the ng2-toasty component in your template:\n\n- `position` - The window position where the toast pops up. Default value is `bottom-right`. Possible values: `bottom-right`, `bottom-left`, `top-right`, `top-left`, `top-center`, `bottom-center`, `center-center`\nExample:\n\n```html\n\u003cng2-toasty [position]=\"'top-center'\"\u003e\u003c/ng2-toasty\u003e\n```\n\n# Credits \nInspired by [angular-toasty](https://github.com/teamfa/angular-toasty)\n\n# License\n [MIT](/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakserg%2Fng2-toasty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakserg%2Fng2-toasty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakserg%2Fng2-toasty/lists"}