artemsky / ng-snotify

Angular 2+ Notification Center
https://artemsky.github.io/ng-snotify/
MIT License
326 stars 71 forks source link

Notification working when injected through service #70

Open BMLande opened 5 years ago

BMLande commented 5 years ago

Helloa , I have created one service where i add all mostly used notifications with its configuration , but it's only work with login component where i injected this notification service(Apps first component) , when i am using same with registration component its not showing any notification , but when i agin come back to login (and suppose i enter wrong password) so both notifications are showing(login error , registration error).

NOTIFICATION SERVICE //following service is created for use ng-snotify

import { Injectable } from '@angular/core';
import { SnotifyService, SnotifyPosition } from 'ng-snotify';
@Injectable({ providedIn: 'root' })
export class NotificationSharedService {
    constructor(private snotifyService: SnotifyService) { }

    public errorNotification(message?: string) {
        this.snotifyService.error(message, {
            timeout: 2000,
            showProgressBar: false,
            closeOnClick: false,
            pauseOnHover: true,
            position: SnotifyPosition.rightTop,
        });
    }

    public WarningNotification(message?: string) {
        this.snotifyService.warning(message, {
            timeout: 2000,
            showProgressBar: false,
            closeOnClick: false,
            pauseOnHover: true,
            position: SnotifyPosition.rightTop,
        });
    }

    public infoNotification(message?: string) {
        this.snotifyService.info(message, {
            timeout: 2000,
            showProgressBar: false,
            closeOnClick: false,
            pauseOnHover: true,
            position: SnotifyPosition.rightTop,
        });
    }

    public successNotification(message?: string) {
        this.snotifyService.success(message, {
            timeout: 2000,
            showProgressBar: false,
            closeOnClick: false,
            pauseOnHover: true,
            position: SnotifyPosition.rightTop,
        });
    }
}
login.component.ts
import { Component, AfterViewInit, Renderer, ElementRef ,OnInit } from '@angular/core';
import { LoginService } from './login.service';
import { Router } from '@angular/router';
import { NotificationSharedService } from '../shared/notification-shared.service';

@Component({
  selector: 'app-applogin',
  templateUrl: './applogin.component.html',
})
export class ApploginComponent implements OnInit , AfterViewInit {
  authenticationError: boolean;
  password: string;
  rememberMe: boolean;
  username: string;
  credentials: any;
  constructor(
    private notification : NotificationSharedService,
    private route : Router
  ) {
    this.credentials = {};
  }
  ngAfterViewInit() {
    setTimeout(() => this.renderer.invokeElementMethod(this.elementRef.nativeElement.querySelector('#exampleInputEmail1'), 'focus', []), 0);
  }
  login() {
    this.loginService.login({
      username: this.username,
      password: this.password,
      rememberMe: this.rememberMe
    }).subscribe(() => {
      this.authenticationError = false;
      this.route.navigate(['dashboard'])
    }, error => {
    //HERE NOTIFICATION CALLED
      this.notification.errorNotification('Failed to sign in! Please check your credentials and try again')
      this.authenticationError = true;
    })
  }
}

alos added in login.component.html

where i did same process for registration component , but its not working , But i when came back to login component its showing both notifications. if u get scenerion please reply back . also suugest how to create reusable notification. thanks

iflashlord commented 5 years ago

where i did same process for registration component , but its not working , But i when came back to login component its showing both notifications. if u get scenerion please reply back . also suugest how to create reusable notification. thanks

You can use this method to work the last call of your functions :

this.snotifyService.clear();
this.snotifyService.remove();

use code before : this.snotifyService.error(.... and in other type in all of your functions

BMLande commented 5 years ago

Thanks for quick reply , i will apply this and test . in between i have created simple Typescript class rather than service and create class object in other components it works for me .