{"id":13452223,"url":"https://github.com/Foxandxss/angular-toastr","last_synced_at":"2025-03-23T19:33:52.098Z","repository":{"id":14067835,"uuid":"16771220","full_name":"Foxandxss/angular-toastr","owner":"Foxandxss","description":"Angular port of CodeSeven/toastr.","archived":false,"fork":false,"pushed_at":"2018-10-10T18:30:16.000Z","size":1388,"stargazers_count":1295,"open_issues_count":60,"forks_count":276,"subscribers_count":50,"default_branch":"master","last_synced_at":"2024-10-29T15:48:35.965Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://foxandxss.github.io/angular-toastr/","language":"JavaScript","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/Foxandxss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"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":"2014-02-12T15:16:44.000Z","updated_at":"2024-08-12T13:14:06.000Z","dependencies_parsed_at":"2022-09-09T11:51:32.146Z","dependency_job_id":null,"html_url":"https://github.com/Foxandxss/angular-toastr","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foxandxss%2Fangular-toastr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foxandxss%2Fangular-toastr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foxandxss%2Fangular-toastr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foxandxss%2Fangular-toastr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Foxandxss","download_url":"https://codeload.github.com/Foxandxss/angular-toastr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245061393,"owners_count":20554563,"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":[],"created_at":"2024-07-31T07:01:17.353Z","updated_at":"2025-03-23T19:33:52.059Z","avatar_url":"https://github.com/Foxandxss.png","language":"JavaScript","funding_links":[],"categories":["Directive","Notification","others","JavaScript"],"sub_categories":["Save"],"readme":"# Angular Toastr\n\n**This project needs new maintainers. I cannot maintain it anymore, I don't do more AngularJS and I don't have the time for it anymore, please send an email or open an issue if you wish to maintain it**\n\n[![Code Climate](https://codeclimate.com/github/Foxandxss/angular-toastr.png)](https://codeclimate.com/github/Foxandxss/angular-toastr) [![Build Status](https://travis-ci.org/Foxandxss/angular-toastr.svg?branch=master)](https://travis-ci.org/Foxandxss/angular-toastr) [![devDependency Status](https://david-dm.org/Foxandxss/angular-toastr/dev-status.svg)](https://david-dm.org/Foxandxss/angular-toastr#info=devDependencies)\n\n**NOTE:** For angular 1.2.x support check `angular-1.2` branch or download the `0.4.x` release of `angular-toastr`.\n\n**angular-toastr** was originally a port of [CodeSeven/toastr](https://github.com/CodeSeven/toastr). It could now show some differences with it.\n\nThe goal is to provide the same API than the original one but without jQuery and using all the angular power.\n\n## Demo\n\n[Demo](http://foxandxss.github.io/angular-toastr/)\n\n## Installation\n\nUse npm:\n\n```\n$ npm install angular-toastr\n```\n\nIf you are not using npm (you should), you can use bower:\n\n```\n$ bower install angular-toastr\n```\n\nTo use a CDN, you can include one of these options:\n\n```html\n\u003cscript src=\"https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/angular-toastr/dist/angular-toastr.css\" /\u003e\n\u003c!-- or --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/angular-toastr@2/dist/angular-toastr.tpls.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/angular-toastr@2/dist/angular-toastr.css\"\u003e\n```\n\nOr you can grab the latest [release](https://github.com/Foxandxss/angular-toastr/releases) and add both the `css` and `javascript` file:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"angular-toastr.css\" /\u003e\n\u003cscript type=\"text/javascript\" src=\"angular-toastr.tpls.js\"\u003e\u003c/script\u003e\n```\n\n**Note:** If you add a script tag for angular-toastr, keep in mind that you need the `tpls` version **or** the other depending if you want the default template or not (see below).\n\nIf you want animations, don't forget to add `angular-animate`.\n\nThen add `toastr` to your modules dependencies:\n\n```javascript\nangular.module('app', ['ngAnimate', 'toastr'])\n```\n\n## Usage\n\nToastr usage is very simple, by default it comes with four types of notification messages:\n\nSuccess:\n\n```javascript\napp.controller('foo', function($scope, toastr) {\n  toastr.success('Hello world!', 'Toastr fun!');\n});\n```\n\n![Success Image](http://i.imgur.com/5LTPLFK.png)\n\nInfo:\n\n```javascript\napp.controller('foo', function($scope, toastr) {\n  toastr.info('We are open today from 10 to 22', 'Information');\n});\n```\n\n![Info Image](http://i.imgur.com/7coIu7q.png)\n\nError:\n\n```javascript\napp.controller('foo', function($scope, toastr) {\n  toastr.error('Your credentials are gone', 'Error');\n});\n```\n\n![Error Image](http://i.imgur.com/sXdKsDK.png)\n\nWarning:\n\n```javascript\napp.controller('foo', function($scope, toastr) {\n  toastr.warning('Your computer is about to explode!', 'Warning');\n});\n```\n\n![Warning Image](http://i.imgur.com/k4g8vMz.png)\n\nApart from that you can customize your basic toasts:\n\nNo title:\n\n```javascript\napp.controller('foo', function($scope, toastr) {\n  toastr.success('I don\\'t need a title to live');\n});\n```\n\n![No Title](http://i.imgur.com/GnwWFo4.png)\n\n#### Closing toasts programmatically:\n\n```javascript\napp.controller('foo', function($scope, toastr) {\n  toastr.clear([toast]);\n});\n```\n\nIf no toast is passed in, all toasts will be closed.\n\n#### Getting active (open) toasts:\n\n```javascript\napp.controller('foo', function($scope, toastr) {\n  toastr.active();\n});\n```\n\n#### Refreshing an opened toast:\n\n```javascript\napp.controller('foo', function($scope, toastr) {\n  var toast = toastr.error('You are not allowed to do this!');\n  // after doing something...\n  toastr.refreshTimer(toast, 5000);\n});\n```\n\nThe second parameter is optional and will fallback to the configured timeOut.\n\nIt return the number of active toasts in screen.\n\n#### Other options\n\nA toast has a `isOpened` flag to see whether it is opened or not.\n\n### Toastr customization\n\nThis library has two parts, a `container` and the `toasts` you put in it.\n\nTo configure the `container` you need to modify the `toastrConfig`, for example:\n\n```javascript\napp.config(function(toastrConfig) {\n  angular.extend(toastrConfig, {\n    autoDismiss: false,\n    containerId: 'toast-container',\n    maxOpened: 0,    \n    newestOnTop: true,\n    positionClass: 'toast-top-right',\n    preventDuplicates: false,\n    preventOpenDuplicates: false,\n    target: 'body'\n  });\n});\n```\n\nThose are the default values, you can pick what you need from it and override with your values.\n\n* **autoDismiss** If set, show only the most recent `maxOpened` toast(s)\n* **containerId**: The name of the container where you want to append your toasts (the container will be created for you).\n* **maxOpened**: Maximum number of toasts displayed at once.\n* **newestOnTop**: Add new toasts on top of the old one. Put on false to put them on the bottom.\n* **positionClass**: The position where the toasts are added.\n* **preventDuplicates**: Prevent duplicates of the last toast.\n* **preventOpenDuplicates**: Prevent duplicates of open toasts.\n* **target**: The element to put the toastr container.\n\nTo customize a `toast` you have two options. First, you can set a default option to be applied globally to all `toasts` in the same way you modified the `container`:\n\n```javascript\napp.config(function(toastrConfig) {\n  angular.extend(toastrConfig, {\n    allowHtml: false,\n    closeButton: false,\n    closeHtml: '\u003cbutton\u003e\u0026times;\u003c/button\u003e',\n    extendedTimeOut: 1000,\n    iconClasses: {\n      error: 'toast-error',\n      info: 'toast-info',\n      success: 'toast-success',\n      warning: 'toast-warning'\n    },  \n    messageClass: 'toast-message',\n    onHidden: null,\n    onShown: null,\n    onTap: null,\n    progressBar: false,\n    tapToDismiss: true,\n    templates: {\n\t  toast: 'directives/toast/toast.html',\n\t  progressbar: 'directives/progressbar/progressbar.html'\n\t},\n    timeOut: 5000,\n    titleClass: 'toast-title',\n    toastClass: 'toast'\n  });\n});\n```\n\n* **allowHtml**: Your toast can use custom HTML here (See [Issue 3](https://github.com/Foxandxss/angular-toastr/issues/3))\n* **closeButton**: Whether to display an \"X\" close button on the toast.\n* **closeHtml**: Html element to be used as a close button.\n* **extendedTimeOut**: The timeout after you hover a toast.\n* **extraData**: If you override the template, you can pass global extra data to your toasts.\n* **iconClasses**: The default type classes for the different toasts.\n* **messageClass**: The class for the toast's message.\n* **progressBar**: A progress bar to see the timeout in real time.\n* **tapToDismiss**: Whether the toast should be dismissed when it is clicked.\n* **templates**: To override the default path of the templates.\n* **timeOut**: The timeout before the toasts disappear.\n* **titleClass**: The class for the toast's title.\n* **toastClass**: Base class for toasts.\n\nToasts have 3 different callbacks:\n\n* **onHidden**: A callback function called when a toast gets hidden. \n\t* First parameter: A boolean to see whether or not the toast was closed via click.\n\t* Second parameter: The whole toast that got hidden.\n* **onShown**: A callback function called when a toast is shown.\n\t* First parameter: The whole toast that got shown.\n* **onTap**: A callback function called when it is clicked.\n\t* First parameter: The whole toast that got clicked.\n\nThe second option is to pass a third parameter (or second if you don't need a **title**). Let see some examples:\n\nToast with custom HTML (available in both title and message):\n\n```javascript\ntoastr.info('\u003cinput type=\"checkbox\" checked\u003e Success!', 'With HTML', {\n  allowHtml: true\n});\n```\n\n![Html Image](http://i.imgur.com/mvz6wcW.png)\n\nToast with a close button:\n\n```javascript\ntoastr.success('What a nice button', 'Button spree', {\n  closeButton: true\n});\n```\n\n![Html Image](http://i.imgur.com/yupvey4.png)\n\nToast with a custom button for apple fans:\n\n```javascript\ntoastr.info('What a nice apple button', 'Button spree', {\n  closeButton: true,\n  closeHtml: '\u003cbutton\u003e\u003c/button\u003e'\n});\n```\n\n![Html Image](http://i.imgur.com/TaCm9HG.png)\n\nA pinky custom style (you can also create here new types with `$decorate`):\n\n```javascript\ntoastr.info('I am totally custom!', 'Happy toast', {\n  iconClass: 'toast-pink'\n});\n```\n\n`toast-pink` is a custom class created for the occasion:\n\n```css\n.toast-pink {\n    background-image: url(...) !important;\n    background-color: #fa39c3;\n}\n```\n\n![Pink image](http://i.imgur.com/jur31Zd.png)\n\n### Toast template\n\nIf you want to use the built-in template, you can use the `angular-toastr.tpls.js` file.\n\nIf you decide that you don't want to use the built-in one, you can always use `angular-toastr.js` file and then providing your own template like this:\n\n```javascript\nangular.module('yourApp').run(['$templateCache', function($templateCache) {\n  $templateCache.put('directives/toast/toast.html',\n    \"\u003cdiv\u003eYour template here\u003c/div\u003e\"\n  );\n  $templateCache.put('directives/progressbar/progressbar.html',\n    \"\u003cdiv\u003eYour progressbar here\u003c/div\u003e\"\n  );\n}]);\n```\n\nThe important part here is to have a key named `templates/toastr/toastr.html`. The module you run it is not important, you just need to do it after you load `toastr`.\n\n**NOTE**: Due some limitations in Angular, you need to have your custom template cached before trying to use it.\n\n\n## Building\n\nIf you want to build from master, you need to:\n\n```\n$ npm install -g gulp\n$ npm install\n$ gulp production\n```\n\nGrab the compressed files under `/dist` and the dev files at `/gen`.\n\n----------\n\n## FAQ\n\n**Q:** Why can't I override the `positionClass` in a toast? It gets ignored.\n**A:** The toasts don't have a position, they are attached to a container and is that container who has the position set on the page. This will be changed in a future version.\n\n## Libraries using `angular-toastr`\n\n* [CodeScaleInc/angular-toastr-flash](https://github.com/CodeScaleInc/angular-toastr-flash) - A library to show flash messages using toasts.\n\n## Credits\n\nAll the credits for the guys at [CodeSeven/toastr](https://github.com/CodeSeven/toastr) for creating the original implementation.\n\n## License\n\nMit License: [http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFoxandxss%2Fangular-toastr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFoxandxss%2Fangular-toastr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFoxandxss%2Fangular-toastr/lists"}