import { Component } from '@angular/core' ; import { Observable } from 'rxjs' ; import { SnotifyPosition , SnotifyService , SnotifyToastConfig } from 'ng-snotify' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] } ) export class AppComponent { style = 'material' ; title = 'Snotify title!' ; body = 'Lorem ipsum dolor sit amet!' ; timeout = 3000 ; position : SnotifyPosition = SnotifyPosition . rightBottom ; progressBar = true ; closeClick = true ; newTop = true ; filterDuplicates = false ; backdrop = - 1 ; dockMax = 8 ; blockMax = 6 ; pauseHover = true ; titleMaxLength = 15 ; bodyMaxLength = 80 ; constructor ( private snotifyService ) { } getConfig ( ) { this . snotifyService . setDefaults ( { global : { newOnTop : this . newTop , maxAtPosition : this . blockMax , maxOnScreen : this . dockMax , filterDuplicates : this . filterDuplicates } } ) ; return { bodyMaxLength : this . bodyMaxLength , titleMaxLength : this . titleMaxLength , backdrop : this . backdrop , position : this . position , timeout : this . timeout , showProgressBar : this . progressBar , closeOnClick : this . closeClick , pauseOnHover : this . pauseHover } ; } onSuccess ( ) { this . snotifyService . success ( this . body , this . title , this . getConfig ( ) ) ; } onInfo ( ) { this . snotifyService . info ( this . body , this . title , this . getConfig ( ) ) ; } onError ( ) { this . snotifyService . error ( this . body , this . title , this . getConfig ( ) ) ; } onWarning ( ) { this . snotifyService . warning ( this . body , this . title , this . getConfig ( ) ) ; } onSimple ( ) { const icon = `https://placehold.it/48x100` ; this . snotifyService . simple ( this . body , this . title , { ... this . getConfig ( ) , icon } ) ; } onAsyncLoading ( ) { const errorAction = new Observable ( observer => { setTimeout ( ( ) => { observer . error ( { title : 'Error' , body : 'Example. Error 404. Service not found' } ) ; } , 2000 ) ; } ) ; const successAction = new Observable ( observer => { setTimeout ( ( ) => { observer . next ( { body : 'Still loading.....' } ) ; } , 2000 ) ; setTimeout ( ( ) => { observer . next ( { title : 'Success' , body : 'Example. Data loaded!' , config : { closeOnClick : true , timeout : 5000 , showProgressBar : true } } ) ; observer . complete ( ) ; } , 5000 ) ; } ) ; const { timeout , ... config } = this . getConfig ( ) ; this . snotifyService . async ( 'This will resolve with error' , 'Async' , errorAction , config ) ; this . snotifyService . async ( 'This will resolve with success' , successAction , config ) ; this . snotifyService . async ( 'Called with promise' , 'Error async' , new Promise ( ( resolve , reject ) => { setTimeout ( ( ) => reject ( { title : 'Error!!!' , body : 'We got an example error!' , config : { closeOnClick : true } } ) , 1000 ) ; setTimeout ( ( ) => resolve ( ) , 1500 ) ; } ) , config ) ; } onConfirmation ( ) { const { timeout , closeOnClick , ... config } = this . getConfig ( ) ; this . snotifyService . confirm ( this . body , this . title , { ... config , buttons : [ { text : 'Yes' , action : ( ) => console . log ( 'Clicked: Yes' ) , bold : false } , { text : 'No' , action : ( ) => console . log ( 'Clicked: No' ) } , { text : 'Later' , action : toast => { console . log ( 'Clicked: Later' ) ; this . snotifyService . remove ( toast . id ) ; } } , { text : 'Close' , action : toast => { console . log ( 'Clicked: Close' ) ; this . snotifyService . remove ( toast . id ) ; } , bold : true } ] } ) ; } onPrompt ( ) { const { timeout , closeOnClick , ... config } = this . getConfig ( ) ; this . snotifyService . prompt ( this . body , this . title , { ... config , buttons : [ { text : 'Yes' , action : toast => console . log ( 'Said Yes: ' + toast . value ) } , { text : 'No' , action : toast => { console . log ( 'Said No: ' + toast . value ) ; this . snotifyService . remove ( toast . id ) ; } } ] , placeholder : 'Enter "ng-snotify" to validate this input' } ) . on ( 'input' , toast => { console . log ( toast . value ) ; toast . valid = ! ! toast . value . match ( 'ng-snotify' ) ; } ) ; } onHtml ( ) { const html = `<div class="snotifyToast__title"><b>Html Bold Title</b></div>
    <div class="snotifyToast__body"><i>Html</i> <b>toast</b> <u>content</u></div>` ; this . snotifyService . html ( html , this . getConfig ( ) ) ; } onClear ( ) { this . snotifyService . clear ( ) ; } }