{"id":18756579,"url":"https://github.com/emonney/ngx-toasta","last_synced_at":"2026-03-06T05:36:22.337Z","repository":{"id":32651726,"uuid":"138844524","full_name":"emonney/ngx-toasta","owner":"emonney","description":"Simple and clean Toast notification library for AngularX (Angular2 and beyond)","archived":false,"fork":false,"pushed_at":"2023-03-15T14:14:05.000Z","size":1095,"stargazers_count":19,"open_issues_count":0,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-17T01:24:47.492Z","etag":null,"topics":["alerts","angular","angular2","angularx","growl","notifications","toast"],"latest_commit_sha":null,"homepage":"https://emonney.github.io/ngx-toasta/","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/emonney.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-27T07:18:53.000Z","updated_at":"2023-05-29T22:20:43.000Z","dependencies_parsed_at":"2024-06-18T17:00:01.952Z","dependency_job_id":"d66a3b47-5cc2-4415-94c0-c14e76e3fbcd","html_url":"https://github.com/emonney/ngx-toasta","commit_stats":{"total_commits":30,"total_committers":5,"mean_commits":6.0,"dds":0.4,"last_synced_commit":"97a358427181fee2e04f49db7d141ad9c47d1422"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/emonney/ngx-toasta","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emonney%2Fngx-toasta","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emonney%2Fngx-toasta/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emonney%2Fngx-toasta/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emonney%2Fngx-toasta/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emonney","download_url":"https://codeload.github.com/emonney/ngx-toasta/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emonney%2Fngx-toasta/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267436672,"owners_count":24086898,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["alerts","angular","angular2","angularx","growl","notifications","toast"],"created_at":"2024-11-07T17:37:16.392Z","updated_at":"2026-03-06T05:36:22.250Z","avatar_url":"https://github.com/emonney.png","language":"TypeScript","readme":"# ngx-toasta [![npm version](https://badge.fury.io/js/ngx-toasta.svg)](https://badge.fury.io/js/ngx-toasta) [![npm monthly downloads](https://img.shields.io/npm/dm/ngx-toasta.svg?style=flat-square)](https://www.npmjs.com/package/ngx-toasta)\nAn angularX toast component that shows growl-style alerts and messages for your application.\n\nFollow me \n[![Twitter Follow](https://img.shields.io/twitter/follow/espadrine.svg?style=social\u0026label=Follow)](https://twitter.com/kommand)\n to be notified about new releases.\n\n\n## Installation\n```sh\nnpm install ngx-toasta\n```\n\n## Demo\n\nOnline demo available [here](https://emonney.github.io/ngx-toasta)\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        'ngx-toasta': 'node_modules/ngx-toasta/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 ToastaConfig.\n- Add `\u003cngx-toasta\u003e\u003c/ngx-toasta\u003e` tag in template of your application component.\n\n#### 2. Import the `ToastaModule`\nImport `ToastaModule.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 {ToastaModule} from 'ngx-toasta';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        ToastaModule.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 `ToastaModule` that you imported in order to avoid having to import it multiple times.\n\n```ts\n@NgModule({\n    imports: [\n        BrowserModule,\n        ToastaModule.forRoot()\n    ],\n    exports: [BrowserModule, ToastaModule],\n})\nexport class SharedModule {\n}\n```\n\n#### 3. Use the `ToastaService` for your application\n- Import `ToastaService` from `ngx-toasta` in your application code:\n\n```js\nimport {Component} from '@angular/core';\nimport {ToastaService, ToastaConfig, ToastOptions, ToastData} from 'ngx-toasta';\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        \u003cngx-toasta\u003e\u003c/ngx-toasta\u003e\n    `\n})\nexport class AppComponent {\n    \n    constructor(private toastaService:ToastaService, private toastaConfig: ToastaConfig) { \n        // Assign the selected theme name to the `theme` property of the instance of ToastaConfig. \n        // Possible values: default, bootstrap, material\n        this.toastaConfig.theme = 'material';\n    }\n    \n    addToast() {\n        // Just add default Toast with title only\n        this.toastaService.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.toastaService.info(toastOptions);\n        this.toastaService.success(toastOptions);\n        this.toastaService.wait(toastOptions);\n        this.toastaService.error(toastOptions);\n        this.toastaService.warning(toastOptions);\n    }\n}\n```\n\n#### 4. How to 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 {ToastaService, ToastaConfig, ToastaComponent, ToastOptions, ToastData} from 'ngx-toasta';\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        \u003cngx-toasta\u003e\u003c/ngx-toasta\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 toastaService:ToastaService) { }\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.toastaService.default(toastOptions); break;\n            case 'info': this.toastaService.info(toastOptions); break;\n            case 'success': this.toastaService.success(toastOptions); break;\n            case 'wait': this.toastaService.wait(toastOptions); break;\n            case 'error': this.toastaService.error(toastOptions); break;\n            case 'warning': this.toastaService.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 {ToastaService, ToastaConfig, ToastaComponent, ToastOptions, ToastData} from 'ngx-toasta';\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        \u003cngx-toasta\u003e\u003c/ngx-toasta\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 toastaService:ToastaService) { }\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.toastaService.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.toastaService.default(toastOptions); break;\n            case 'info': this.toastaService.info(toastOptions); break;\n            case 'success': this.toastaService.success(toastOptions); break;\n            case 'wait': this.toastaService.wait(toastOptions); break;\n            case 'error': this.toastaService.error(toastOptions); break;\n            case 'warning': this.toastaService.warning(toastOptions); break;\n        }\n    }\n}\n```\n\n#### 6. Customize the `ngx-toasta` for your application in template\nYou can use the following properties to customize the ngx-toasta 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`, `bottom-fullwidth` `top-right`, `top-left`, `top-fullwidth`,`top-center`, `bottom-center`, `center-center`\nExample:\n\n```html\n\u003cngx-toasta [position]=\"'top-center'\"\u003e\u003c/ngx-toasta\u003e\n```\n\n\n#### 7. Options\nUse these options to configure individual or global toasts\n\n\nOptions specific to an individual toast:\n\n```js\nToastOptions\n{\n    \"title\": string,      //A string or html for the title\n    \"msg\": string,        //A string or html for the message\n    \"showClose\": true,    //Whether to show a close button\n    \"showDuration\": true, //Whether to show a progress bar\n    \"theme\": \"default\",   //The theme to apply to this toast\n    \"timeout\": 5000,      //Time to live until toast is removed. 0 is unlimited\n    \"onAdd\": Function,    //Function that gets called after this toast is added\n    \"onRemove\": Function  //Function that gets called after this toast is removed\n}\n```\n\n\n\nConfigurations that affects all toasts:\n\n```js\nToastaConfig\n{\n    \"limit\": 5,                 //Maximum toasts that can be shown at once. Older toasts will be removed. 0 is unlimited\n    \"showClose\": true,          //Whether to show the 'x' icon to close the toast\n    \"showDuration\": true,       //Whether to show a progress bar at the bottom of the notification\n    \"position\": \"bottom-right\", //The window position where the toast pops up\n    \"timeout\": 5000,            //Time to live in milliseconds. 0 is unlimited\n    \"theme\": \"default\"          //What theme to use\n}\n```\n\n\n# Credits \nOriginal work by [ng2-toasty](https://github.com/akserg/ng2-toasty)\n\n\n# License\n [MIT](https://github.com/emonney/ngx-toasta/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femonney%2Fngx-toasta","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femonney%2Fngx-toasta","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femonney%2Fngx-toasta/lists"}