{"id":32239046,"url":"https://github.com/underscoredotspace/ng-cleantoast","last_synced_at":"2026-02-26T16:02:33.029Z","repository":{"id":58241458,"uuid":"79061081","full_name":"underscoredotspace/ng-cleantoast","owner":"underscoredotspace","description":"A light, simple and fast toast directive for Angular 1.x","archived":false,"fork":false,"pushed_at":"2017-04-27T23:11:17.000Z","size":37,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-24T07:13:42.013Z","etag":null,"topics":["angular","component","directive","service","toast"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/underscoredotspace.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-15T21:35:46.000Z","updated_at":"2017-03-11T18:52:28.000Z","dependencies_parsed_at":"2022-08-31T00:40:49.103Z","dependency_job_id":null,"html_url":"https://github.com/underscoredotspace/ng-cleantoast","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/underscoredotspace/ng-cleantoast","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/underscoredotspace%2Fng-cleantoast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/underscoredotspace%2Fng-cleantoast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/underscoredotspace%2Fng-cleantoast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/underscoredotspace%2Fng-cleantoast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/underscoredotspace","download_url":"https://codeload.github.com/underscoredotspace/ng-cleantoast/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/underscoredotspace%2Fng-cleantoast/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29750015,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["angular","component","directive","service","toast"],"created_at":"2025-10-22T14:34:49.761Z","updated_at":"2026-02-26T16:02:33.025Z","avatar_url":"https://github.com/underscoredotspace.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-CleanToast\n\nSimple toast service for Angular 1.x. Many toast services are built on sending $emit messages via $rootScope. This never felt right to me, so this design keeps all data within the service and it's related directive. \n\nDesigned to be as light as possible so no built-in animations, and no outside dependencies other than AngularJS itself. \n\nJust toasts. \n\n### Installation\nAvailable on Bower with `bower install ng-cleantoast`. \n\n### Usage\nAdd `bower_components/ng-cleantoast/dist/ng-cleantoast.min.js` to your main index.html along with Angular thus: \n\n````html\n\u003chead\u003e\n  \u003cscript src=\"bower_components/angularjs/angular.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"bower_components/ng-cleantoast/dist/ng-cleantoast.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n````\n\nInject `ngCleanToast` to your module, and add `toasts` to any components that  will be create toasts:\n\n````javascript\nangular.module('demoApp', ['ngCleanToast'])\n\n.controller('demoController', function(toasts) {\n  // your code...\n})\n````\n\nNew toasts are created using: \n\n````javascript\ntoasts.create(type, title, text, timeout)\n````\n\nBuilt-in types are `info`, `warn`, `success` and `error`. They can be accessed via `toasts.types()` like `toasts.types('info')`. Custom types can be added with `toasts.addType('myNiceType')`. \n\n![Screenshot of example toast](screenshot.png)\n\n`title` and `text` are optional, but empty strings are needed if they are not required: \n\n````javascript\n// Creates a new toast without a title and default timeout [see below]\ntoasts.create(toasts.type('info'), '', 'Hello')\n````\n\n`timeout` is the number of milliseconds (1000th of 1s) before the toast will disappear. This is optional and will default to 3000ms (3s) if not passed. You may also create sticky toasts that don't disappear until they are clicked on, by passing `toasts.sticky` (or any negative number) as the timeout value. \n\nSticky toasts have their own style classes so you can make them stand out. See the examples below. \n\n#### Note about async calls\nIf the toast is called from an async fuction, the call must be wrapped in an $apply() function like so: \n\n````javascript\n$scope.$apply(function() {\n  toasts.create(type, title, text, timeout)\n})\n```` \n\n### Placement\nYou will need to tell the browser where to show toasts, by placing an element or attribute in a DIV or other tag:\n\n````html\n\u003cct-toasts\u003e\u003c/ct-toasts\u003e\n\n\u003c!-- OR --\u003e\n\n\u003cdiv ct-toasts\u003e\u003c/div\u003e\n````\n\n#### Placement CSS\nIt's convention that a toast pops up above some other content, but not blocking anything important. In the demo, the `ct-toasts` element has fixed positioning and uses a very high `z-index`. \n\nIf you follow this pattern, the initial `height` of `ct-toasts` should be `0`, and `max-height` should be no more than the view height (minus any `top`/`margin`/`padding` etc. to prevent unexpected scrolling). This example shows top-right placement of the toasts: \n\n````css\n.ct-toasts {\n  position: fixed;\n  z-index: 1000;\n  width: 200px;\n  height: 0;\n  top: 20px;\n  right: 20px;\n  max-height: calc(100vh - 20px); }\n````\n\nThe `div` or `ct-toasts` element you create will be replaced with `div class=\"ct-toasts\"`, and the toasts theselves render inside the `.ct-toasts` class like so (for toast type **info**): \n\n````HTML\n\u003cdiv class=\"ct-toasts\"\u003e\n  \u003cdiv class=\"ct-toast ct-toast-info\"\u003e\n    \u003cdiv class=\"ct-toast-title\"\u003eToast Title\u003c/div\u003e\n    \u003cdiv class=\"ct-toast-text\"\u003eToast Text\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n````\n\nSticky toasts are ever-so-slightly different: \n\n````HTML\n\u003cdiv class=\"ct-toasts\"\u003e\n  \u003cdiv class=\"ct-toast ct-sticky ct-toast-info\"\u003e\n    \u003cdiv class=\"ct-toast-title ct-sticky\"\u003eToast Title\u003c/div\u003e\n    \u003cdiv class=\"ct-toast-text ct-sticky\"\u003eToast Text\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n````\n\nThis allows you to style every element of the toast yourself. \n\n### Demo\nThere is an [example](https://underscoredotspace.github.io/ng-cleantoast/demo) with styles (the awful background is purely to enhance the opacity/shadow change on hover (sorry)). \n\n### Tests\nWith devDependencies installed, run `npm test`\n\n### Issues/Pull requests\nPlease log any [issues, suggestions or questions](https://github.com/underscoredotspace/ng-cleantoast/issues). I aim to keep this as simple as possible, while providing the key features you expect of toasts. \n\nTo set up an environment for development, clone the repo and `npm install`. Minify with `npm run grunt` before running tests (which are run against the minified version) and submitting a pull request. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funderscoredotspace%2Fng-cleantoast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funderscoredotspace%2Fng-cleantoast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funderscoredotspace%2Fng-cleantoast/lists"}