1 import { Component } from '@angular/core';
2 import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';
3 import { Observable } from 'rxjs/Observable';
4 import { AlertService, IAlert } from '../../@core-xds/services/alert.service';
6 import 'style-loader!angular2-toaster/toaster.css';
9 selector: 'ngx-notifications',
10 styleUrls: ['./notifications.component.scss'],
11 template: '<toaster-container [toasterconfig]="config"></toaster-container>',
13 export class NotificationsComponent {
15 config: ToasterConfig;
17 private position = 'toast-top-full-width';
18 private animationType = 'slideDown';
19 private toastsLimit = 10;
20 private toasterService: ToasterService;
21 private alerts$: Observable<IAlert[]>;
24 toasterService: ToasterService,
25 private alertSvr: AlertService,
27 this.toasterService = toasterService;
29 this.alertSvr.alerts.subscribe(alerts => {
30 if (alerts.length === 0) {
33 alerts.forEach(al => {
34 const title = al.type.toUpperCase();
35 this.showToast(al.type, title, al.msg, al.dismissTimeout);
41 private showToast(type: string, title: string, body: string, tmo: number) {
42 this.config = new ToasterConfig({
43 positionClass: this.position,
46 tapToDismiss: true, // is Hide OnClick
47 preventDuplicates: false,
48 animation: this.animationType,
49 limit: this.toastsLimit,
51 const toast: Toast = {
56 showCloseButton: true,
57 bodyOutputType: BodyOutputType.TrustedHtml,
59 this.toasterService.popAsync(toast);
63 this.toasterService.clear();