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.
- package/README.md +46 -41
- package/bundles/ngx-toastr.umd.js +454 -388
- package/bundles/ngx-toastr.umd.js.map +1 -1
- package/bundles/ngx-toastr.umd.min.js +1 -15
- package/bundles/ngx-toastr.umd.min.js.map +1 -1
- package/esm2015/ngx-toastr.js +1 -1
- package/esm2015/overlay/overlay-container.js +7 -10
- package/esm2015/overlay/overlay-ref.js +1 -1
- package/esm2015/overlay/overlay.js +9 -11
- package/esm2015/portal/dom-portal-host.js +1 -1
- package/esm2015/portal/portal.js +1 -1
- package/esm2015/public_api.js +1 -1
- package/esm2015/toastr/toast-injector.js +1 -1
- package/esm2015/toastr/toast-noanimation.component.js +34 -46
- package/esm2015/toastr/toast.component.js +35 -46
- package/esm2015/toastr/toast.directive.js +17 -20
- package/esm2015/toastr/toastr-config.js +2 -1
- package/esm2015/toastr/toastr.module.js +19 -23
- package/esm2015/toastr/toastr.service.js +21 -21
- package/fesm2015/ngx-toastr.js +130 -148
- package/fesm2015/ngx-toastr.js.map +1 -1
- package/ngx-toastr.metadata.json +1 -1
- package/package.json +7 -10
- package/portal/portal.d.ts +1 -1
- package/toastr/toast.component.d.ts +1 -1
- package/toastr/toastr-config.d.ts +8 -2
- package/toastr/toastr.service.d.ts +7 -5
- package/esm5/ngx-toastr.js +0 -5
- package/esm5/overlay/overlay-container.js +0 -49
- package/esm5/overlay/overlay-ref.js +0 -23
- package/esm5/overlay/overlay.js +0 -91
- package/esm5/portal/dom-portal-host.js +0 -58
- package/esm5/portal/portal.js +0 -67
- package/esm5/public_api.js +0 -12
- package/esm5/toastr/toast-injector.js +0 -90
- package/esm5/toastr/toast-noanimation.component.js +0 -216
- package/esm5/toastr/toast.component.js +0 -226
- package/esm5/toastr/toast.directive.js +0 -34
- package/esm5/toastr/toastr-config.js +0 -73
- package/esm5/toastr/toastr.module.js +0 -64
- package/esm5/toastr/toastr.service.js +0 -229
- package/fesm5/ngx-toastr.js +0 -1168
- 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.
|
|
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
|
-
|
|
|
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
|
|
136
|
-
| ----------------- | ------------------------------ |
|
|
137
|
-
| toastComponent | Component | Toast
|
|
138
|
-
| closeButton | boolean | false
|
|
139
|
-
| timeOut | number | 5000
|
|
140
|
-
| extendedTimeOut | number | 1000
|
|
141
|
-
| disableTimeOut | boolean \|
|
|
142
|
-
| easing | string | 'ease-in'
|
|
143
|
-
| easeTime | string \| number | 300
|
|
144
|
-
| enableHtml | boolean | false
|
|
145
|
-
| progressBar | boolean | false
|
|
146
|
-
| progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing'
|
|
147
|
-
| toastClass | string | 'ngx-toastr'
|
|
148
|
-
| positionClass | string | 'toast-top-right'
|
|
149
|
-
| titleClass | string | 'toast-title'
|
|
150
|
-
| messageClass | string | 'toast-message'
|
|
151
|
-
| tapToDismiss | boolean | true
|
|
152
|
-
| onActivateTick | boolean | false
|
|
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
|
-
|
|
271
|
-
|
|
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})
|
|
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.
|
|
389
|
+
5. How to handle toastr click/tap action?
|
|
385
390
|
|
|
386
391
|
```ts
|
|
387
392
|
showToaster() {
|