ngx-toastr 12.1.0 → 13.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.md +46 -41
  2. package/bundles/ngx-toastr.umd.js +454 -388
  3. package/bundles/ngx-toastr.umd.js.map +1 -1
  4. package/bundles/ngx-toastr.umd.min.js +1 -15
  5. package/bundles/ngx-toastr.umd.min.js.map +1 -1
  6. package/esm2015/ngx-toastr.js +1 -1
  7. package/esm2015/overlay/overlay-container.js +7 -10
  8. package/esm2015/overlay/overlay-ref.js +1 -1
  9. package/esm2015/overlay/overlay.js +9 -11
  10. package/esm2015/portal/dom-portal-host.js +1 -1
  11. package/esm2015/portal/portal.js +1 -1
  12. package/esm2015/public_api.js +1 -1
  13. package/esm2015/toastr/toast-injector.js +1 -1
  14. package/esm2015/toastr/toast-noanimation.component.js +34 -46
  15. package/esm2015/toastr/toast.component.js +35 -46
  16. package/esm2015/toastr/toast.directive.js +17 -20
  17. package/esm2015/toastr/toastr-config.js +2 -1
  18. package/esm2015/toastr/toastr.module.js +19 -23
  19. package/esm2015/toastr/toastr.service.js +21 -21
  20. package/fesm2015/ngx-toastr.js +130 -148
  21. package/fesm2015/ngx-toastr.js.map +1 -1
  22. package/ngx-toastr.metadata.json +1 -1
  23. package/package.json +7 -10
  24. package/portal/portal.d.ts +1 -1
  25. package/toastr/toast.component.d.ts +1 -1
  26. package/toastr/toastr-config.d.ts +8 -2
  27. package/toastr/toastr.service.d.ts +7 -5
  28. package/esm5/ngx-toastr.js +0 -5
  29. package/esm5/overlay/overlay-container.js +0 -49
  30. package/esm5/overlay/overlay-ref.js +0 -23
  31. package/esm5/overlay/overlay.js +0 -91
  32. package/esm5/portal/dom-portal-host.js +0 -58
  33. package/esm5/portal/portal.js +0 -67
  34. package/esm5/public_api.js +0 -12
  35. package/esm5/toastr/toast-injector.js +0 -90
  36. package/esm5/toastr/toast-noanimation.component.js +0 -216
  37. package/esm5/toastr/toast.component.js +0 -226
  38. package/esm5/toastr/toast.directive.js +0 -34
  39. package/esm5/toastr/toastr-config.js +0 -73
  40. package/esm5/toastr/toastr.module.js +0 -64
  41. package/esm5/toastr/toastr.service.js +0 -229
  42. package/fesm5/ngx-toastr.js +0 -1168
  43. package/fesm5/ngx-toastr.js.map +0 -1
package/README.md CHANGED
@@ -16,7 +16,7 @@
16
16
  <br>
17
17
  </div>
18
18
 
19
- DEMO: https://ngx-toastr.netlify.com/
19
+ DEMO: https://ngx-toastr.vercel.app
20
20
 
21
21
  ## Features
22
22
 
@@ -30,6 +30,7 @@ DEMO: https://ngx-toastr.netlify.com/
30
30
  - Output toasts to an optional target directive
31
31
 
32
32
  ## Dependencies
33
+
33
34
  Latest version available for each version of Angular
34
35
 
35
36
  | ngx-toastr | Angular |
@@ -38,7 +39,8 @@ Latest version available for each version of Angular
38
39
  | 8.10.2 | 5.x |
39
40
  | 10.1.0 | 8.x 7.x 6.x |
40
41
  | 11.3.3 | 8.x |
41
- | current | >= 9.x |
42
+ | 12.1.0 | 9.x |
43
+ | current | >= 10.x |
42
44
 
43
45
  ## Install
44
46
 
@@ -101,10 +103,10 @@ import { ToastrModule } from 'ngx-toastr';
101
103
  imports: [
102
104
  CommonModule,
103
105
  BrowserAnimationsModule, // required animations module
104
- ToastrModule.forRoot() // ToastrModule added
106
+ ToastrModule.forRoot(), // ToastrModule added
105
107
  ],
106
108
  bootstrap: [App],
107
- declarations: [App]
109
+ declarations: [App],
108
110
  })
109
111
  class MainModule {}
110
112
  ```
@@ -132,24 +134,24 @@ There are **individual options** and **global options**.
132
134
 
133
135
  Passed to `ToastrService.success/error/warning/info/show()`
134
136
 
135
- | Option | Type | Default | Description |
136
- | ----------------- | ------------------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
137
- | toastComponent | Component | Toast | Angular component that will be used |
138
- | closeButton | boolean | false | Show close button |
139
- | timeOut | number | 5000 | Time to live in milliseconds |
140
- | extendedTimeOut | number | 1000 | Time to close after a user hovers over toast |
141
- | disableTimeOut | boolean \| | 'timeOut' \| 'extendedTimeOut' | false | Disable both timeOut and extendedTimeOut when set to `true`. Allows specifying which timeOut to disable, either: `timeOut` or `extendedTimeOut` |
142
- | easing | string | 'ease-in' | Toast component easing |
143
- | easeTime | string \| number | 300 | Time spent easing |
144
- | enableHtml | boolean | false | Allow html in message |
145
- | progressBar | boolean | false | Show progress bar |
146
- | progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing' | Changes the animation of the progress bar. |
147
- | toastClass | string | 'ngx-toastr' | Class on toast |
148
- | positionClass | string | 'toast-top-right' | Class on toast container |
149
- | titleClass | string | 'toast-title' | Class inside toast on title |
150
- | messageClass | string | 'toast-message' | Class inside toast on message |
151
- | tapToDismiss | boolean | true | Close on click |
152
- | onActivateTick | boolean | false | Fires `changeDetectorRef.detectChanges()` when activated. Helps show toast from asynchronous events outside of Angular's change detection |
137
+ | Option | Type | Default | Description |
138
+ | ----------------- | ------------------------------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
139
+ | toastComponent | Component | Toast | Angular component that will be used |
140
+ | closeButton | boolean | false | Show close button |
141
+ | timeOut | number | 5000 | Time to live in milliseconds |
142
+ | extendedTimeOut | number | 1000 | Time to close after a user hovers over toast |
143
+ | disableTimeOut | boolean \| | 'timeOut' \| 'extendedTimeOut' | false | Disable both timeOut and extendedTimeOut when set to `true`. Allows specifying which timeOut to disable, either: `timeOut` or `extendedTimeOut` |
144
+ | easing | string | 'ease-in' | Toast component easing |
145
+ | easeTime | string \| number | 300 | Time spent easing |
146
+ | enableHtml | boolean | false | Allow html in message |
147
+ | progressBar | boolean | false | Show progress bar |
148
+ | progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing' | Changes the animation of the progress bar. |
149
+ | toastClass | string | 'ngx-toastr' | Class on toast |
150
+ | positionClass | string | 'toast-top-right' | Class on toast container |
151
+ | titleClass | string | 'toast-title' | Class inside toast on title |
152
+ | messageClass | string | 'toast-message' | Class inside toast on message |
153
+ | tapToDismiss | boolean | true | Close on click |
154
+ | onActivateTick | boolean | false | Fires `changeDetectorRef.detectChanges()` when activated. Helps show toast from asynchronous events outside of Angular's change detection |
153
155
 
154
156
  #### Setting Individual Options
155
157
 
@@ -158,7 +160,7 @@ options object to replace any default option.
158
160
 
159
161
  ```typescript
160
162
  this.toastrService.error('everything is broken', 'Major Error', {
161
- timeOut: 3000
163
+ timeOut: 3000,
162
164
  });
163
165
  ```
164
166
 
@@ -177,6 +179,7 @@ options:
177
179
  | preventDuplicates | boolean | false | Block duplicate messages |
178
180
  | countDuplicates | boolean | false | Displays a duplicates counter (preventDuplicates must be true). Toast must have a title and duplicate message |
179
181
  | resetTimeoutOnDuplicate | boolean | false | Reset toast timeout on duplicate (preventDuplicates must be true) |
182
+ | includeTitleDuplicates | boolean | false | Include the title of a toast when checking for duplicates (by default only message is compared) |
180
183
 
181
184
  ##### iconClasses defaults
182
185
 
@@ -185,7 +188,7 @@ iconClasses = {
185
188
  error: 'toast-error',
186
189
  info: 'toast-info',
187
190
  success: 'toast-success',
188
- warning: 'toast-warning'
191
+ warning: 'toast-warning',
189
192
  };
190
193
  ```
191
194
 
@@ -210,6 +213,8 @@ imports: [
210
213
  export interface ActiveToast {
211
214
  /** Your Toast ID. Use this to close it individually */
212
215
  toastId: number;
216
+ /** the title of your toast. Stored to prevent duplicates if includeTitleDuplicates set */
217
+ title: string
213
218
  /** the message of your toast. Stored to prevent duplicates */
214
219
  message: string;
215
220
  /** a reference to the component see portal.ts */
@@ -249,10 +254,10 @@ import { AppComponent } from './app.component';
249
254
  BrowserAnimationsModule,
250
255
 
251
256
  ToastrModule.forRoot({ positionClass: 'inline' }),
252
- ToastContainerModule
257
+ ToastContainerModule,
253
258
  ],
254
259
  providers: [],
255
- bootstrap: [AppComponent]
260
+ bootstrap: [AppComponent],
256
261
  })
257
262
  export class AppModule {}
258
263
  ```
@@ -267,12 +272,13 @@ import { ToastContainerDirective, ToastrService } from 'ngx-toastr';
267
272
  @Component({
268
273
  selector: 'app-root',
269
274
  template: `
270
- <h1><a (click)="onClick()">Click</a></h1>
271
- <div toastContainer></div>
272
- `
275
+ <h1><a (click)="onClick()">Click</a></h1>
276
+ <div toastContainer></div>
277
+ `,
273
278
  })
274
279
  export class AppComponent implements OnInit {
275
- @ViewChild(ToastContainerDirective, {static: true}) toastContainer: ToastContainerDirective;
280
+ @ViewChild(ToastContainerDirective, { static: true })
281
+ toastContainer: ToastContainerDirective;
276
282
 
277
283
  constructor(private toastrService: ToastrService) {}
278
284
  ngOnInit() {
@@ -287,18 +293,21 @@ export class AppComponent implements OnInit {
287
293
  ## Functions
288
294
 
289
295
  ##### Clear
296
+
290
297
  Remove all or a single toast by optional id
298
+
291
299
  ```ts
292
300
  toastrService.clear(toastId?: number);
293
301
  ```
294
302
 
295
303
  ##### Remove
304
+
296
305
  Remove and destroy a single toast by id
306
+
297
307
  ```
298
308
  toastrService.remove(toastId: number);
299
309
  ```
300
310
 
301
-
302
311
  ## SystemJS
303
312
 
304
313
  If you are using SystemJS, you should also adjust your configuration to point to
@@ -322,11 +331,7 @@ override the default toast component in the global config to use
322
331
  In your main module (ex: `app.module.ts`)
323
332
 
324
333
  ```typescript
325
- import {
326
- ToastrModule,
327
- ToastNoAnimation,
328
- ToastNoAnimationModule
329
- } from 'ngx-toastr';
334
+ import { ToastrModule, ToastNoAnimation, ToastNoAnimationModule } from 'ngx-toastr';
330
335
 
331
336
  @NgModule({
332
337
  imports: [
@@ -334,7 +339,7 @@ import {
334
339
 
335
340
  // BrowserAnimationsModule no longer required
336
341
  ToastNoAnimationModule.forRoot(),
337
- ]
342
+ ],
338
343
  // ...
339
344
  })
340
345
  class AppModule {}
@@ -353,12 +358,12 @@ import { ToastrModule } from 'ngx-toastr';
353
358
  @NgModule({
354
359
  imports: [
355
360
  ToastrModule.forRoot({
356
- toastComponent: YourToastComponent // added custom toast!
357
- })
361
+ toastComponent: YourToastComponent, // added custom toast!
362
+ }),
358
363
  ],
359
364
  entryComponents: [YourToastComponent], // add!
360
365
  bootstrap: [App],
361
- declarations: [App, YourToastComponent] // add!
366
+ declarations: [App, YourToastComponent], // add!
362
367
  })
363
368
  class AppModule {}
364
369
  ```
@@ -381,7 +386,7 @@ ngOnInit() {
381
386
  https://github.com/scttcper/ngx-toastr/issues/179
382
387
  4. How can I translate messages See:
383
388
  https://github.com/scttcper/ngx-toastr/issues/201
384
- 5. How to handle toastr click/tap action?
389
+ 5. How to handle toastr click/tap action?
385
390
 
386
391
  ```ts
387
392
  showToaster() {