{"_id":"@damjantonkli/ngx-toastr","_rev":"10-46c5184704efc7d48f47960cb822f411","name":"@damjantonkli/ngx-toastr","dist-tags":{"latest":"22.0.2"},"versions":{"22.0.1":{"name":"@damjantonkli/ngx-toastr","version":"22.0.1","license":"MIT","_id":"@damjantonkli/ngx-toastr@22.0.1","maintainers":[{"name":"damjantonkli","email":"damjan.tonkli@icloud.com"}],"homepage":"https://github.com/damjantonkli/ngx-toastr#readme","bugs":{"url":"https://github.com/damjantonkli/ngx-toastr/issues"},"dist":{"shasum":"c5adc3c72a82a4d440e89fcb5988fee5b2d62581","tarball":"https://registry.npmjs.org/@damjantonkli/ngx-toastr/-/ngx-toastr-22.0.1.tgz","fileCount":11,"integrity":"sha512-tbcYhwZGnbGThGbcPHDUk4MM98CQZWQ3Ve3/aC/Aiw3zxWrjQBx56nwiYY/reUcdrxtnhd7mQ2Tc+vD519yTew==","signatures":[{"sig":"MEUCIQCTfh24IxaBfCWGCJxhq6Fkc3IdNB8E0u0u6n1OJU6rPwIgaDlUFrge4NNNLmDIQfkzaSOyFzUABslmzukTWwfFLSo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":174384},"type":"module","module":"fesm2022/damjantonkli-ngx-toastr.mjs","exports":{".":{"types":"./types/damjantonkli-ngx-toastr.d.ts","default":"./fesm2022/damjantonkli-ngx-toastr.mjs"},"./toastr":{"default":"./toastr.css"},"./toastr-old":{"default":"./toastr-old.css"},"./package.json":{"default":"./package.json"},"./toastr-bs4-alert":{"default":"./toastr-bs4-alert.scss"},"./toastr-bs5-alert":{"default":"./toastr-bs5-alert.scss"}},"gitHead":"32215e1671b1ee23e4d50d7482f3bc4f8e7d95b6","typings":"types/damjantonkli-ngx-toastr.d.ts","_npmUser":{"name":"damjantonkli","email":"damjan.tonkli@icloud.com"},"repository":{"url":"git+https://github.com/damjantonkli/ngx-toastr.git","type":"git","directory":"projects/ngx-toastr"},"_npmVersion":"11.19.0","description":"<div align=\"center\">   <img src=\"https://raw.githubusercontent.com/damjantonkli/ngx-toastr/master/misc/documentation-assets/ngx-toastr-example.png\" width=\"300\" alt=\"Angular Toastr\">   <h1>ngx-toastr</h1> </div>","directories":{},"sideEffects":false,"_nodeVersion":"26.7.0","dependencies":{"tslib":"^2.8.1"},"publishConfig":{"access":"public","provenance":false},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.2","@angular/core":"^22.0.0","@angular/common":"^22.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-toastr_22.0.1_1786379258143_0.7180155765808032","host":"s3://npm-registry-packages-npm-production"}},"22.0.2":{"name":"@damjantonkli/ngx-toastr","version":"22.0.2","license":"MIT","peerDependencies":{"@angular/common":"^22.0.0","@angular/core":"^22.0.0","rxjs":"^7.8.2"},"dependencies":{"tslib":"^2.8.1"},"publishConfig":{"access":"public","provenance":true},"repository":{"type":"git","url":"git+https://github.com/damjantonkli/ngx-toastr.git","directory":"projects/ngx-toastr"},"exports":{"./toastr":{"default":"./toastr.css"},"./toastr-old":{"default":"./toastr-old.css"},"./toastr-bs4-alert":{"default":"./toastr-bs4-alert.scss"},"./toastr-bs5-alert":{"default":"./toastr-bs5-alert.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./types/damjantonkli-ngx-toastr.d.ts","default":"./fesm2022/damjantonkli-ngx-toastr.mjs"}},"sideEffects":false,"module":"fesm2022/damjantonkli-ngx-toastr.mjs","typings":"types/damjantonkli-ngx-toastr.d.ts","type":"module","gitHead":"2da89944aaaed67b1ec0c217dd6be64fd3f9451c","_id":"@damjantonkli/ngx-toastr@22.0.2","description":"<div align=\"center\">   <img src=\"https://raw.githubusercontent.com/damjantonkli/ngx-toastr/master/misc/documentation-assets/ngx-toastr-example.png\" width=\"300\" alt=\"Angular Toastr\">   <h1>ngx-toastr</h1> </div>","bugs":{"url":"https://github.com/damjantonkli/ngx-toastr/issues"},"homepage":"https://github.com/damjantonkli/ngx-toastr#readme","_nodeVersion":"24.18.0","_npmVersion":"11.19.0","dist":{"integrity":"sha512-+47LGl1N+R5vFREd2PkiP6IWzSBgRUDO+aUveIyIKYnYwsEZaMmFLC/JjvMVSBVnmF71Daz0KKm8gCSD7RU+XA==","shasum":"39240e84082c8ffad99cb4289c178940feec8598","tarball":"https://registry.npmjs.org/@damjantonkli/ngx-toastr/-/ngx-toastr-22.0.2.tgz","fileCount":11,"unpackedSize":174456,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@damjantonkli%2fngx-toastr@22.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGmgHrweHVWpG8tEagduhLpujdgBBvmL5qGclxZVBFcIAiBDnsPPsAZzPDuJOPGeMWsBMWYwcvoPMODtDErJZF418Q=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4bfabaa5-aec7-4db4-9f45-5e10bf26c52e"}},"directories":{},"maintainers":[{"name":"damjantonkli","email":"damjan.tonkli@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-toastr_22.0.2_1786379869131_0.6455187135051421"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-10T16:27:38.003Z","modified":"2026-08-10T16:37:49.643Z","21.0.0":"2026-08-07T11:52:01.140Z","21.0.1":"2026-08-08T11:40:35.086Z","1.0.0":"2026-08-08T11:58:52.025Z","22.0.0":"2026-08-09T15:31:29.215Z","21.1.0":"2026-08-09T15:59:10.361Z","22.0.1":"2026-08-10T16:27:38.284Z","22.0.2":"2026-08-10T16:37:49.287Z"},"bugs":{"url":"https://github.com/damjantonkli/ngx-toastr/issues"},"license":"MIT","homepage":"https://github.com/damjantonkli/ngx-toastr#readme","repository":{"type":"git","url":"git+https://github.com/damjantonkli/ngx-toastr.git","directory":"projects/ngx-toastr"},"description":"<div align=\"center\">   <img src=\"https://raw.githubusercontent.com/damjantonkli/ngx-toastr/master/misc/documentation-assets/ngx-toastr-example.png\" width=\"300\" alt=\"Angular Toastr\">   <h1>ngx-toastr</h1> </div>","maintainers":[{"name":"damjantonkli","email":"damjan.tonkli@icloud.com"}],"readme":"<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/damjantonkli/ngx-toastr/master/misc/documentation-assets/ngx-toastr-example.png\" width=\"300\" alt=\"Angular Toastr\">\n  <h1>ngx-toastr</h1>\n</div>\n\nThis is a fork of [scttcper/ngx-toastr](https://github.com/scttcper/ngx-toastr)\n\n## Features\n\n- Toast Component Injection without being passed `ViewContainerRef`\n- No use of `@for`. Fewer dirty checks and higher performance\n- No use of `@angular/animations`\n- AoT compilation and lazy loading compatible\n- Component inheritance for custom toasts\n- SystemJS/UMD rollup bundle\n- Output toasts to an optional target directive\n\n## Dependencies\n\nLatest version available for each version of Angular\n\n| ngx-toastr      | Angular         |\n| --------------- | --------------- |\n| 13.2.1          | 10.x 11.x       |\n| 14.3.0          | 12.x 13.x       |\n| 15.2.2          | 14.x.           |\n| 16.2.0          | 15.x            |\n| 17.0.2          | 16.x            |\n| 18.x 19x        | >= 17.x < 23.x  |\n| 20.x            | >= 20.x < 22.x  |\n| 21.x skipped*   |                 |\n| current         | >= 22.x         |\n\n*version 21 was skipped to force versioning into lockstep with Angular\n\n## Install\n\n```bash\nnpm install ngx-toastr --save\n```\n\n## Setup\n\n**step 1:** add css\n\n- copy\n  [toast css](/src/lib/toastr.css)\n  to your project.\n- If you are using sass you can import the css.\n\n```scss\n// regular style toast\n@import 'ngx-toastr/toastr';\n\n// bootstrap style toast\n// or import a bootstrap 4 alert styled design (SASS ONLY)\n// should be after your bootstrap imports, it uses bs4 variables, mixins, functions\n@import 'ngx-toastr/toastr-bs4-alert';\n\n// if you'd like to use it without importing all of bootstrap it requires\n@import 'bootstrap/scss/functions';\n@import 'bootstrap/scss/variables';\n@import 'bootstrap/scss/mixins';\n// bootstrap 4\n@import 'ngx-toastr/toastr-bs4-alert';\n// boostrap 5\n@import 'ngx-toastr/toastr-bs5-alert';\n```\n\n- If you are using angular-cli you can add it to your angular.json\n\n```ts\n\"styles\": [\n  \"styles.scss\",\n  \"node_modules/ngx-toastr/toastr.css\" // try adding '../' if you're using angular cli before 6\n]\n```\n\n**step 2:** add `ToastrModule` to app `NgModule`, or `provideToastr` to providers.\n\n- Module based\n\n```typescript\nimport { ToastrModule } from 'ngx-toastr';\n\n@NgModule({\n  imports: [\n    ToastrModule.forRoot(), // ToastrModule added\n  ],\n  bootstrap: [App],\n  declarations: [App],\n})\nclass MainModule {}\n```\n\n- Standalone\n\n```typescript\nimport { AppComponent } from './src/app.component';\nimport { provideToastr } from 'ngx-toastr';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideToastr(), // Toastr providers\n  ]\n});\n```\n\n## Use\n\n```typescript\nimport { ToastrService } from 'ngx-toastr';\nimport { inject } from '@angular/core';\n\n@Component({...})\nexport class YourComponent {\n  toastr = inject(ToastrService);\n\n  showSuccess() {\n    this.toastr.success('Hello world!', 'Toastr fun!');\n  }\n}\n```\n\n## Options\n\nThere are **individual options** and **global options**.\n\n### Individual Options\n\nPassed to `ToastrService.success/error/warning/info/show()`\n\n| Option            | Type                           | Default                        | Description                                                                             \n| ----------------- | ------------------------------ | ------------------------------ | ------------------------------------------------- |\n| toastComponent    | Component                      | Toast                          | Angular component that will be used               |\n| closeButton       | boolean                        | false                          | Show close button                                 |\n| timeOut           | number                         | 5000                           | Time to live in milliseconds                      |\n| extendedTimeOut   | number                         | 1000                           | Time to close after a user hovers over toast      |\n| disableTimeOut    | `boolean \\| 'timeOut' \\| 'extendedTimeOut'`  | false              | Disable both timeOut and extendedTimeOut when set to `true`. Allows specifying which timeOut to disable, either: `timeOut` or `extendedTimeOut` |\n| easing            | string                         | 'ease-in'                      | Toast component easing                            |\n| easeTime          | string \\| number               | 300                            | Time spent easing                                 |\n| enableHtml        | boolean                        | false                          | Allow html in message                             |\n| newestOnTop       | boolean                        | true                           | New toast placement                               |\n| progressBar       | boolean                        | false                          | Show progress bar                                 |\n| progressAnimation | `'decreasing' \\| 'increasing'` | 'decreasing'                   | Changes the animation of the progress bar.        |\n| toastClass        | string                         | 'ngx-toastr'                   | CSS class(es) for toast                           |\n| positionClass     | string                         | 'toast-top-right'              | CSS class(es) for toast container                 |\n| titleClass        | string                         | 'toast-title'                  | CSS class(es) for inside toast on title           |\n| messageClass      | string                         | 'toast-message'                | CSS class(es) for inside toast on message         |\n| tapToDismiss      | boolean                        | true                           | Close on click                                    |\n| onActivateTick    | boolean                        | false                          | Fires `changeDetectorRef.detectChanges()` when activated. Helps show toast from asynchronous events outside of Angular's change detection |\n\n#### Setting Individual Options\n\nsuccess, error, info, warning take `(message, title, ToastConfig)` pass an\noptions object to replace any default option.\n\n```typescript\nthis.toastrService.error('everything is broken', 'Major Error', {\n  timeOut: 3000,\n});\n```\n\n### Global Options\n\nAll [individual options](#individual-options) can be overridden in the global\noptions to affect all toasts. In addition, global options include the following\noptions:\n\n| Option                  | Type    | Default                            | Description                                                                                                   |\n| ----------------------- | ------- | ---------------------------------- | ------------------------------------------------------------------ |\n| maxOpened               | number  | 0                                  | Max toasts opened. Toasts will be queued. 0 is unlimited           |\n| autoDismiss             | boolean | false                              | Dismiss current toast when max is reached                          |\n| iconClasses             | object  | [see below](#iconclasses-defaults) | Classes used on toastr service methods                             |\n| preventDuplicates       | boolean | false                              | Block duplicate messages                                           |\n| countDuplicates         | boolean | false                              | Displays a duplicates counter (preventDuplicates must be true). Toast must have a title and duplicate message |\n| resetTimeoutOnDuplicate | boolean | false                              | Reset toast timeout on duplicate (preventDuplicates must be true)  |\n| includeTitleDuplicates  | boolean | false                              | Include the title of a toast when checking for duplicates (by default only message is compared) |\n\n##### iconClasses defaults\n\n```typescript\niconClasses = {\n  error: 'toast-error',\n  info: 'toast-info',\n  success: 'toast-success',\n  warning: 'toast-warning',\n};\n```\n\n#### Setting Global Options\n\nPass values to `ToastrModule.forRoot()` or `provideToastr()` to set global options.\n\n- Module based\n\n```typescript\n// root app NgModule\nimports: [\n  ToastrModule.forRoot({\n    timeOut: 10000,\n    positionClass: 'toast-bottom-right',\n    preventDuplicates: true,\n  }),\n],\n```\n\n- Standalone\n\n```typescript\nimport { AppComponent } from './src/app.component';\nimport { provideToastr } from 'ngx-toastr';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideToastr({\n      timeOut: 10000,\n      positionClass: 'toast-bottom-right',\n      preventDuplicates: true,\n    }), \n  ]\n});\n```\n\n\n### Toastr Service methods return:\n\n```typescript\nexport interface ActiveToast {\n  /** Your Toast ID. Use this to close it individually */\n  toastId: number;\n  /** the title of your toast. Stored to prevent duplicates if includeTitleDuplicates set */\n  title: string;\n  /** the message of your toast. Stored to prevent duplicates */\n  message: string;\n  /** a reference to the component see portal.ts */\n  portal: ComponentRef<any>;\n  /** a reference to your toast */\n  toastRef: ToastRef<any>;\n  /** triggered when toast is active */\n  onShown: Observable<any>;\n  /** triggered when toast is destroyed */\n  onHidden: Observable<any>;\n  /** triggered on toast click */\n  onTap: Observable<any>;\n  /** available for your use in custom toast */\n  onAction: Observable<any>;\n}\n```\n\n### Put toasts in your own container\n\nPut toasts in a specific div inside your application. This should probably be\nsomewhere that doesn't get deleted. Add `ToastContainerDirective` to the ngModule\nwhere you need the directive available. Make sure that your container has\nan `aria-live=\"polite\"` attribute, so that any time a toast is injected into\nthe container it is announced by screen readers.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { ToastrModule, ToastContainerDirective } from 'ngx-toastr';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    ToastrModule.forRoot({ positionClass: 'inline' }),\n    ToastContainerDirective,\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nAdd a div with `toastContainer` directive on it.\n\n```typescript\nimport { Component, OnInit, viewChild, inject } from '@angular/core';\nimport { ToastContainerDirective, ToastrService } from 'ngx-toastr';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <h1><a (click)=\"onClick()\">Click</a></h1>\n    <div aria-live=\"polite\" toastContainer></div>\n  `,\n})\nexport class AppComponent implements OnInit {\n  toastContainer = viewChild(ToastContainerDirective, { static: true });\n  toastrService = inject(ToastrService);\n\n  ngOnInit() {\n    this.toastrService.overlayContainer = this.toastContainer;\n  }\n  onClick() {\n    this.toastrService.success('in div');\n  }\n}\n```\n\n## Functions\n\n##### Clear\n\nRemove all or a single toast by optional id\n\n```ts\ntoastrService.clear(toastId?: number);\n```\n\n##### Remove\n\nRemove and destroy a single toast by id\n\n```\ntoastrService.remove(toastId: number);\n```\n\n## SystemJS\n\nIf you are using SystemJS, you should also adjust your configuration to point to\nthe UMD bundle.\n\nIn your SystemJS config file, `map` needs to tell the System loader where to\nlook for `ngx-toastr`:\n\n```js\nmap: {\n  'ngx-toastr': 'node_modules/ngx-toastr/bundles/ngx-toastr.umd.min.js',\n}\n```\n\n## Setup Without Animations\n\nIf you do not want animations you can override the default \ntoast component in the global config to use\n`ToastNoAnimation` instead of the default one.\n\nIn your main module (ex: `app.module.ts`)\n\n```typescript\nimport { ToastrModule, ToastNoAnimation, ToastNoAnimationModule } from 'ngx-toastr';\n\n@NgModule({\n  imports: [\n    // ...\n    ToastNoAnimationModule.forRoot(),\n  ],\n  // ...\n})\nclass AppModule {}\n```\n\nThat's it! No animations.\n\n## Using A Custom Toast\n\nCreate your toast component extending Toast see the demo's pink toast for an example\nhttps://github.com/damjantonkli/ngx-toastr/blob/master/src/app/pink.toast.ts\n\n```typescript\nimport { ToastrModule } from 'ngx-toastr';\n\n@NgModule({\n  imports: [\n    ToastrModule.forRoot({\n      toastComponent: YourToastComponent, // added custom toast!\n    }),\n  ],\n  bootstrap: [App],\n  declarations: [App, YourToastComponent], // add!\n})\nclass AppModule {}\n```\n\n## FAQ\n\n1.  ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it\n    was checked\\\n    When opening a toast inside an angular lifecycle wrap it in setTimeout\n\n```typescript\nngOnInit() {\n    setTimeout(() => this.toastr.success('sup'))\n}\n```\n\n2.  Change default icons (check, warning sign, etc)\\\n    Overwrite the css background-image: https://github.com/damjantonkli/ngx-toastr/blob/master/src/lib/toastr.css.\n3.  How do I use this in an ErrorHandler?\\\n    See: https://github.com/scttcper/ngx-toastr/issues/179.\n4.  How can I translate messages?\\\n    See: https://github.com/scttcper/ngx-toastr/issues/201.\n5.  How to handle toastr click/tap action?\n    ```ts\n    showToaster() {\n      this.toastr.success('Hello world!', 'Toastr fun!')\n        .onTap\n        .pipe(take(1))\n        .subscribe(() => this.toasterClickedHandler());\n    }\n\n    toasterClickedHandler() {\n      console.log('Toastr clicked');\n    }\n    ```\n6. How to customize styling without overridding defaults?\\\n    Add multiple CSS classes separated by a space:\n    ```ts\n    toastClass: 'yourclass ngx-toastr'\n    ```\n    See: https://github.com/scttcper/ngx-toastr/issues/594.\n\n## Previous Works\n\n[toastr](https://github.com/CodeSeven/toastr) original toastr\\\n[angular-toastr](https://github.com/Foxandxss/angular-toastr) AngularJS toastr\\\n[notyf](https://github.com/caroso1222/notyf) notyf (css)\n\n## License\n\nMIT\n\n---\n\n> GitHub [@scttcper](https://github.com/scttcper) &nbsp;&middot;&nbsp;\n> Twitter [@scttcper](https://twitter.com/scttcper)\n","readmeFilename":"README.md"}