{"_id":"@cime/ngx-toasty","_rev":"2-9b553c9e928745a0f37a0b7f682fb179","name":"@cime/ngx-toasty","dist-tags":{"latest":"7.0.2"},"versions":{"0.0.0-semantically-released":{"name":"@cime/ngx-toasty","description":"Angular Toasty component shows growl-style alerts and messages for your web app","version":"0.0.0-semantically-released","scripts":{"test":"karma start","test-watch":"tsc && karma start --no-single-run --auto-watch","commit":"npm run prepublish && npm test && git-cz","prepublish":"npm run build","build":"ngc --noUnusedParameters --noUnusedLocals && webpack && npm run minify","semantic-release":"semantic-release --prepare && npm publish --access=public && semantic-release --success","minify":"uglifyjs bundles/index.umd.js --screw-ie8 --compress --mangle --comments --output bundles/index.umd.min.js"},"repository":{"type":"git","url":"git+https://github.com/cime/ngx-toasty.git"},"keywords":["angular","angular2","angular6","angular7","toasty","growl"],"author":{"name":"Sergey Akopkokhyants"},"license":"MIT","bugs":{"url":"https://github.com/cime/ngx-toasty/issues"},"main":"bundles/index.umd.js","module":"index.js","typings":"index.d.ts","homepage":"https://github.com/cime/ngx-toasty","peerDependencies":{"@angular/core":"^7.0.2"},"devDependencies":{"@angular/common":"^7.0.2","@angular/compiler":"^7.0.2","@angular/compiler-cli":"^7.0.2","@angular/core":"^7.0.2","@angular/platform-browser":"^7.0.2","@angular/platform-browser-dynamic":"^7.0.2","@types/hammerjs":"^2.0.36","@types/jasmine":"^2.8.11","@types/node":"~8.9.4","awesome-typescript-loader":"^5.2.1","cash-cp":"^0.2.0","codelyzer":"^4.5.0","commitizen":"^3.0.4","copy-webpack-plugin":"^4.6.0","core-js":"^2.5.7","cz-conventional-changelog":"^2.1.0","istanbul-instrumenter-loader":"^3.0.1","jasmine-core":"^3.3.0","karma":"^2.0.2","karma-chrome-launcher":"^2.2.0","karma-coverage":"^1.1.2","karma-firefox-launcher":"^1.1.0","karma-jasmine":"^1.1.2","karma-mocha-reporter":"^2.2.5","karma-remap-coverage":"~0.1.5","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","loader-utils":"^1.1.0","reflect-metadata":"^0.1.12","rxjs":"^6.3.3","semantic-release":"^15.10.8","source-map-loader":"^0.2.4","ts-helpers":"^1.1.2","tslint":"^5.11.0","tslint-loader":"^3.5.4","typescript":"^3.1.6","uglify-js":"^3.4.9","webpack":"^4.25.1","webpack-cli":"^3.1.2","zone.js":"^0.8.26"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"directories":{"test":"tests"},"gitHead":"4f635a4ede13503e3181af0e278cde5c57ed7b16","_id":"@cime/ngx-toasty@0.0.0-semantically-released","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"cime","email":"cime3d@gmail.com"},"dist":{"integrity":"sha512-euRoEx5jDOeRYB6/LS2bVrfIZVGB+K+EVEIorI9hvujzXGy0ATFKm4uLYGizEpZ94d2Osrsp7YRB645RSx0OJg==","shasum":"7b8fe426c0af22d36af2b27e6fa5175f351a4002","tarball":"https://registry.npmjs.org/@cime/ngx-toasty/-/ngx-toasty-0.0.0-semantically-released.tgz","fileCount":77,"unpackedSize":963213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4t4xCRA9TVsSAnZWagAAC8sP/0E+8zD8WXyOACVNjGEe\ndRN6xH6+10zqSUGlOhArsd2czTwQflCXmEDG4ZHeR9LpL3JdzrI5Zrj2vdlK\nppCPGRju3Y4kzxJfpNdEvpDJvHH9xldoaHBCa2iZG1sKzAMrrzWf+K3PXAUl\nEANk1grdt13b65R4d90wQRZ+WTO+s+AycojUqg+dGEThfQ7neUQJYtpEqjl3\nI+IY0I0qJlRsYTjfjbNfaHFJTBbJjzg3LVtq+KgS/Jgh70uEsLQhp0B3NtV9\nwDXLlmDFS3Xq0cNQQAGQXKm5hDKlRFRDM6TQSI4vQFv/bpUyjiHLOA26XHDV\nrl5GR6tMQeZUQUz3mXFoOjDVCTZRn8Zj50DV1nJJ6p3WdS2xBx7CUpnH434l\nYoaSe5Y3Q47sATHvmE/0Tzdi/qqKSRqXw+37yDBscHoQIOKCgxCNek7ucmAK\nKY8wh1jfoSJGlqzHixiUZpnsGTgwdaYaakjMQzGFmte8fd1J0mpmqU1UgbxE\nsL7QaFD/Rdfc4cZZ1Qx2LgJt7nyurD1UKbzPgnBLbvvdvy4WF1CnfYhoteo+\nukbHZ5AH1szWd1GT2oAKKOxYXLYj/HZx3vHObIXCqDFssROSBI2k1BFn+Taz\nFqQnYSiMdwu9+tEpjetyvGCm4x4iHU9rsc+A+XvqyuREvB+xY6/pIqh5GA9v\nv9CX\r\n=yJ6b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrrGeXKx9n/ZxCiQizAog9uqUGDPOftFC4EkUGXrUN5wIgZR/AtCi0QDHpbKa6Jt/m6x5ek/pQikRnw3RzoZ4v/CQ="}]},"maintainers":[{"name":"cime","email":"cime3d@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-toasty_0.0.0-semantically-released_1541594673058_0.747367909954582"},"_hasShrinkwrap":false},"7.0.2":{"name":"@cime/ngx-toasty","description":"Angular Toasty component shows growl-style alerts and messages for your web app","version":"7.0.2","scripts":{"test":"karma start","test-watch":"tsc && karma start --no-single-run --auto-watch","commit":"npm run prepublish && npm test && git-cz","prepublish":"npm run build","build":"ngc --noUnusedParameters --noUnusedLocals && webpack && npm run minify","semantic-release":"semantic-release --prepare && npm publish --access=public && semantic-release --success","minify":"uglifyjs bundles/index.umd.js --screw-ie8 --compress --mangle --comments --output bundles/index.umd.min.js"},"repository":{"type":"git","url":"git+https://github.com/cime/ngx-toasty.git"},"keywords":["angular","angular2","angular6","angular7","toasty","growl"],"author":{"name":"Sergey Akopkokhyants"},"license":"MIT","bugs":{"url":"https://github.com/cime/ngx-toasty/issues"},"main":"bundles/index.umd.js","module":"index.js","typings":"index.d.ts","homepage":"https://github.com/cime/ngx-toasty","peerDependencies":{"@angular/core":"^7.0.2"},"devDependencies":{"@angular/common":"^7.0.2","@angular/compiler":"^7.0.2","@angular/compiler-cli":"^7.0.2","@angular/core":"^7.0.2","@angular/platform-browser":"^7.0.2","@angular/platform-browser-dynamic":"^7.0.2","@types/hammerjs":"^2.0.36","@types/jasmine":"^2.8.11","@types/node":"~8.9.4","awesome-typescript-loader":"^5.2.1","cash-cp":"^0.2.0","codelyzer":"^4.5.0","commitizen":"^3.0.4","copy-webpack-plugin":"^4.6.0","core-js":"^2.5.7","cz-conventional-changelog":"^2.1.0","istanbul-instrumenter-loader":"^3.0.1","jasmine-core":"^3.3.0","karma":"^2.0.2","karma-chrome-launcher":"^2.2.0","karma-coverage":"^1.1.2","karma-firefox-launcher":"^1.1.0","karma-jasmine":"^1.1.2","karma-mocha-reporter":"^2.2.5","karma-remap-coverage":"~0.1.5","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","loader-utils":"^1.1.0","reflect-metadata":"^0.1.12","rxjs":"^6.3.3","semantic-release":"^15.10.8","source-map-loader":"^0.2.4","ts-helpers":"^1.1.2","tslint":"^5.11.0","tslint-loader":"^3.5.4","typescript":"^3.1.6","uglify-js":"^3.4.9","webpack":"^4.25.1","webpack-cli":"^3.1.2","zone.js":"^0.8.26"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"directories":{"test":"tests"},"gitHead":"89a5040263e6ebef3f45a246d02a421880aa7b71","_id":"@cime/ngx-toasty@7.0.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"cime","email":"cime3d@gmail.com"},"dist":{"integrity":"sha512-ORDRu0xIkXZiRmEEQrcd8i9x/AR4dIj/g5I2dg+rPSLaVIPmgEh/wWNSeaLy8Zy847QhaSEFK0Rko/Ljt58OVw==","shasum":"69c3e7edb4c219ed5a78decd6f8f77cd34cac98b","tarball":"https://registry.npmjs.org/@cime/ngx-toasty/-/ngx-toasty-7.0.2.tgz","fileCount":77,"unpackedSize":963191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4uJ2CRA9TVsSAnZWagAA5/QP/ijqUxkFO9QSVt+q9/va\nm5dcoX5Stm9s0611C+k8m48Nz5RqfGekrHeFfwW9pqKOSLoWmUN4YQBt9psY\nI6UuYeO6Hyq2AwDe2GEbrP2UTfBF5U99yvRRae09VOOpvMgOlMMSVu4lt91O\nFLU76w5VwCEyBbpifxaeCCN2MuLOlaa5egCPc3B7X4f1sOnrgoaNg42FROZ8\nWUCbfM2PKHTuKxbxBgVAPu4BpHRZKAlHevzVFd45y+LVwM/o6+/R675C6gI8\neuVnWBVgghQNky+BNwCUGP85lT7teP7BH07/wjZdM5ok9aDpAN6uOOHsbl/7\nMIizlc9+9Vt+VuIdA9Avcim8ama2LxPUeQfuxUQo8e1bRXg+HM8hixAqoBYN\nh2HQM5JGgSABNutrsnS5tPVDhaYjHYSx+5sfqLy87pufn+r+76wAj5Uacucp\nhdGJGaH1Nd/9oOCRBpSuY4UdhdiThUyEO4X74S1i8l3brEH8Jp7MFi6LmsT2\nH58k0vWQmB6HxR1lVqmYSsTPXuld0L6+9HONxuPSmufK3L0KbEYxX8XRcLH1\nz4UJSAPdQ7WbOw5mwpjBKvnnJNw++kPyvD7uBkrQnnSUeVMYj08n6KK+8d/v\nDLoyBDJBnBuhGqkq6zdeL6pTeX+aqHdA0xCCNO0Wd5PeMiSkEKs+cIurqasY\nwSJb\r\n=SA5M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd3DVfFyiD6r/hDvtwcoXCv41N07nNgew5+uJOkMwIIgIhAN4Ewq/CYf+5wpZkpRJ8Un/a+AJxW6cc4ikkmYde1OlL"}]},"maintainers":[{"name":"cime","email":"cime3d@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-toasty_7.0.2_1541595765791_0.7507136830430743"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-07T12:44:32.909Z","0.0.0-semantically-released":"2018-11-07T12:44:33.201Z","modified":"2022-04-04T22:59:51.476Z","7.0.2":"2018-11-07T13:02:46.044Z"},"maintainers":[{"name":"cime","email":"cime3d@gmail.com"}],"description":"Angular Toasty component shows growl-style alerts and messages for your web app","homepage":"https://github.com/cime/ngx-toasty","keywords":["angular","angular2","angular6","angular7","toasty","growl"],"repository":{"type":"git","url":"git+https://github.com/cime/ngx-toasty.git"},"author":{"name":"Sergey Akopkokhyants"},"bugs":{"url":"https://github.com/cime/ngx-toasty/issues"},"license":"MIT","readme":"# Angular 2 Toasty [](https://badge.fury.io/js/ng2-toasty) [](https://www.npmjs.com/package/ng2-toasty)\nAngular Toasty component shows growl-style alerts and messages for your application.\n\n[](https://travis-ci.org/akserg/ng2-toasty)\n[](https://github.com/semantic-release/semantic-release)\n[](http://commitizen.github.io/cz-cli/)\n[](https://david-dm.org/akserg/ng2-toasty)\n[](https://david-dm.org/akserg/ng2-toasty#info=devDependencies)\n[](https://snyk.io/test/github/akserg/ng2-toasty)\n\nFollow me [](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 @cime/ngx-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 '@cime/ngx-toasty': 'node_modules/@cime/ngx-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 `` 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 '@cime/ngx-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 `@cime/ngx-toasty` in your application code:\n\n```js\nimport {Component} from '@angular/core';\nimport {ToastyService, ToastyConfig, ToastOptions, ToastData} from '@cime/ngx-toasty';\n\n@Component({\n selector: 'app',\n template: `\n
Hello world
\n \n \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) => {\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 '@cime/ngx-toasty';\nimport {Subject, Observable, Subscription} from 'rxjs';\n\n@Component({\n selector: 'app',\n template: `\n
Hello world
\n \n \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) => {\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) => {\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 '@cime/ngx-toasty';\nimport {Subject, Observable, Subscription} from 'rxjs';\n\n@Component({\n selector: 'app',\n template: `\n
Hello world
\n \n \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) => {\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) => {\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 > 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 `@cime/ngx-toasty` for your application in template\nYou can use the following properties to customize the @cime/ngx-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\n```\n\n# Credits\nInspired by [angular-toasty](https://github.com/teamfa/angular-toasty)\n\n# License\n [MIT](/LICENSE\n","readmeFilename":"README.md"}