\n\nDEMO: https://ngx-toastr.vercel.app\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| current | >= 20.x |\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;\n /** a reference to your toast */\n toastRef: ToastRef;\n /** triggered when toast is active */\n onShown: Observable;\n /** triggered when toast is destroyed */\n onHidden: Observable;\n /** triggered on toast click */\n onTap: Observable;\n /** available for your use in custom toast */\n onAction: Observable;\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
![\"Angular](\"https://raw.githubusercontent.com/scttcper/ngx-toastr/master/misc/documentation-assets/ngx-toastr-example.png\")
![\"npm\"](\"https://badge.fury.io/js/ngx-toastr.svg\"){kind=icon}
\n \n \n ![\"codecov\"](\"https://img.shields.io/codecov/c/github/scttcper/ngx-toastr.svg\")
\n \n