import { Component , OnInit } from "@angular/core" ; import { Toast } from "./toast" ; import { styles } from "./toast.component.styles" ; import { ToastService } from "./toast.service" ; @ Component ( { selector : 'mpt-toast' , templateUrl : 'toast.component.html' , } ) export class ToastComponent implements OnInit { styles : any = styles ; toasts : Toast [ ] = [ ] ; constructor ( private toastService ) { } ngOnInit ( ) { this . toastService . events . debounceTime ( 500 ) . map ( toast => this . applyStyle ( toast ) ) . do ( toast => this . addToast ( toast ) ) . delay ( 4800 ) . do ( toast => this . fadeOut ( toast ) ) . delay ( 200 ) . do ( toast => this . removeToast ( toast ) ) . subscribe ( ) ; } private applyStyle ( toast ) { return { ... toast , styles : [ styles . toastBase , styles [ toast . level ] ] , } ; } private addToast ( toast ) { this . toasts . push ( toast ) ; } private removeToast ( toast ) { this . toasts = this . toasts . filter ( t => t !== toast ) ; } private fadeOut ( toast ) { toast . styles = [ ... toast . styles , styles . fadeOut ] ; } }