1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import { Component } from '@angular/core';
import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';
import { Observable } from 'rxjs/Observable';
import { AlertService, IAlert } from '../../@core-xds/services/alert.service';
import 'style-loader!angular2-toaster/toaster.css';
@Component({
selector: 'ngx-notifications',
styleUrls: ['./notifications.component.scss'],
template: '<toaster-container [toasterconfig]="config"></toaster-container>',
})
export class NotificationsComponent {
config: ToasterConfig;
private position = 'toast-top-full-width';
private animationType = 'slideDown';
private toastsLimit = 10;
private toasterService: ToasterService;
private alerts$: Observable<IAlert[]>;
constructor(
toasterService: ToasterService,
private alertSvr: AlertService,
) {
this.toasterService = toasterService;
this.alertSvr.alerts.subscribe(alerts => {
if (alerts.length === 0) {
this.clearToasts();
} else {
alerts.forEach(al => {
const title = al.type.toUpperCase();
this.showToast(al.type, title, al.msg, al.dismissTimeout);
});
}
});
}
private showToast(type: string, title: string, body: string, tmo: number) {
this.config = new ToasterConfig({
positionClass: this.position,
timeout: tmo,
newestOnTop: true,
tapToDismiss: true, // is Hide OnClick
preventDuplicates: false,
animation: this.animationType,
limit: this.toastsLimit,
});
const toast: Toast = {
type: type,
title: title,
body: body,
timeout: tmo,
showCloseButton: true,
bodyOutputType: BodyOutputType.TrustedHtml,
};
this.toasterService.popAsync(toast);
}
clearToasts() {
this.toasterService.clear();
}
}
|
