{"id":13480731,"url":"https://github.com/scttcper/ngx-toastr","last_synced_at":"2025-05-13T16:06:04.781Z","repository":{"id":38320985,"uuid":"64414434","full_name":"scttcper/ngx-toastr","owner":"scttcper","description":"🍞 Angular Toastr","archived":false,"fork":false,"pushed_at":"2024-08-27T21:04:27.000Z","size":6437,"stargazers_count":2559,"open_issues_count":75,"forks_count":358,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-04-18T22:40:31.914Z","etag":null,"topics":["angular","angular2","aot-compilation","ngmodule","toastr","typescript"],"latest_commit_sha":null,"homepage":"https://ngx-toastr.vercel.app","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/scttcper.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":"2016-07-28T17:19:43.000Z","updated_at":"2025-04-18T15:53:18.000Z","dependencies_parsed_at":"2023-11-16T05:21:02.695Z","dependency_job_id":"c2c413cb-692e-4dd7-9829-54febef67275","html_url":"https://github.com/scttcper/ngx-toastr","commit_stats":{"total_commits":952,"total_committers":57,"mean_commits":16.70175438596491,"dds":0.3067226890756303,"last_synced_commit":"e688d8039158bc83a9fe4ac08589f2ab8c550466"},"previous_names":["scttcper/toastr-ng2"],"tags_count":147,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-toastr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-toastr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-toastr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scttcper%2Fngx-toastr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scttcper","download_url":"https://codeload.github.com/scttcper/ngx-toastr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250512839,"owners_count":21443102,"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":["angular","angular2","aot-compilation","ngmodule","toastr","typescript"],"created_at":"2024-07-31T17:00:44.245Z","updated_at":"2025-04-23T20:39:44.534Z","avatar_url":"https://github.com/scttcper.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","Third Party Components","Dependencies","UI Components"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Notifications","UI","Notification"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/scttcper/ngx-toastr/master/misc/documentation-assets/ngx-toastr-example.png\" width=\"300\" alt=\"Angular Toastr\"\u003e\n  \u003cbr\u003e\n  \u003ch1\u003engx-toastr\u003c/h1\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.org/package/ngx-toastr\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/ngx-toastr.svg\" alt=\"npm\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/github/scttcper/ngx-toastr\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/scttcper/ngx-toastr.svg\" alt=\"codecov\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\nDEMO: https://ngx-toastr.vercel.app\n\n## Features\n\n- Toast Component Injection without being passed `ViewContainerRef`\n- No use of `*ngFor`. Fewer dirty checks and higher performance.\n- AoT compilation and lazy loading compatible\n- Component inheritance for custom toasts\n- SystemJS/UMD rollup bundle\n- Animations using Angular's\n  [Web Animations API](https://angular.io/docs/ts/latest/guide/animations.html)\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| current    | \u003e= 17.x     |\n\n## Install\n\n```bash\nnpm install ngx-toastr --save\n```\n\n`@angular/animations` package is a required dependency for the default toast\n\n```bash\nnpm install @angular/animations --save\n```\n\nDon't want to use `@angular/animations`? See\n[Setup Without Animations](#setup-without-animations).\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, make sure you have `BrowserAnimationsModule` (or `provideAnimations`) as well.\n\n- Module based\n\n```typescript\nimport { CommonModule } from '@angular/common';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\nimport { ToastrModule } from 'ngx-toastr';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    BrowserAnimationsModule, // required animations module\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 { provideAnimations } from '@angular/platform-browser/animations';\n\nimport { provideToastr } from 'ngx-toastr';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideAnimations(), // required animations providers\n    provideToastr(), // Toastr providers\n  ]\n});\n```\n\n## Use\n\n```typescript\nimport { ToastrService } from 'ngx-toastr';\n\n@Component({...})\nexport class YourComponent {\n  constructor(private toastr: 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 { provideAnimations } from '@angular/platform-browser/animations';\n\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\u003cany\u003e;\n  /** a reference to your toast */\n  toastRef: ToastRef\u003cany\u003e;\n  /** triggered when toast is active */\n  onShown: Observable\u003cany\u003e;\n  /** triggered when toast is destroyed */\n  onHidden: Observable\u003cany\u003e;\n  /** triggered on toast click */\n  onTap: Observable\u003cany\u003e;\n  /** available for your use in custom toast */\n  onAction: Observable\u003cany\u003e;\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 `ToastContainerModule` 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 { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\nimport { ToastrModule, ToastContainerModule } from 'ngx-toastr';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n\n    ToastrModule.forRoot({ positionClass: 'inline' }),\n    ToastContainerModule,\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 } from '@angular/core';\n\nimport { ToastContainerDirective, ToastrService } from 'ngx-toastr';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003ch1\u003e\u003ca (click)=\"onClick()\"\u003eClick\u003c/a\u003e\u003c/h1\u003e\n    \u003cdiv aria-live=\"polite\" toastContainer\u003e\u003c/div\u003e\n  `,\n})\nexport class AppComponent implements OnInit {\n  @ViewChild(ToastContainerDirective, { static: true })\n  toastContainer: ToastContainerDirective;\n\n  constructor(private toastrService: ToastrService) {}\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 to include `@angular/animations` in your project you can\noverride the default toast 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\n    // BrowserAnimationsModule no longer required\n    ToastNoAnimationModule.forRoot(),\n  ],\n  // ...\n})\nclass AppModule {}\n```\n\nThat's it! Animations are no longer required.\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/scttcper/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(() =\u003e this.toastr.success('sup'))\n}\n```\n\n2.  Change default icons (check, warning sign, etc)\\\n    Overwrite the css background-image: https://github.com/scttcper/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(() =\u003e 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\u003e GitHub [@scttcper](https://github.com/scttcper) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Twitter [@scttcper](https://twitter.com/scttcper)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscttcper%2Fngx-toastr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscttcper%2Fngx-toastr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscttcper%2Fngx-toastr/lists"}