flauc / angular2-notifications

A light and easy to use notifications library for Angular.
https://stackblitz.com/edit/angular2-notifications-example
MIT License
746 stars 164 forks source link

Notifications not working as expected(Not opening without click action) #179

Open gmmrx opened 7 years ago

gmmrx commented 7 years ago

Hi there. I just saw this module and starting to use in my project. But somehow its acting strange. I am submitting the form, if i submit by entering, its not showing any notification until i click outside the form, if i submit by clicking, its not showing until i click again and again.

I also add onCreate and onDestroy events, its not showing any errors even if its created one. Its creating one notification when i hit submit but not showing or adding to html.

I cant simulate the error but i can show you code, if its not help i can try to reproducing but its MeteorJS and it'll be take long time which i dont have right now.

This is Register.Component


import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgForm } from '@angular/forms';
import {AuthService} from '../auth.service';
import template from './register.component.html';
import style from './register.styles.less';
import { Meteor } from 'meteor/meteor';
import {Observable} from 'rxjs/Observable';
import {NotificationsService, SimpleNotificationsComponent} from 'angular2-notifications';
@Component({
   template:template,
    styles:[style]
})

export class RegisterComponent implements OnInit {
    constructor (private authService: AuthService, private _service: NotificationsService) {

    }
  public options = {
        timeOut: 5000,
        lastOnBottom: true,
        clickToClose: true,
        maxLength: 0,
        maxStack: 7,
        showProgressBar: true,
        pauseOnHover: true,
        preventDuplicates: false,
        preventLastDuplicates: 'visible',
        rtl: false,
        animate: 'scale',
        position: ['right', 'bottom']
    };
    onSignUpSubmit(f:NgForm, event: Event) {
        event.preventDefault();
        const email = f.value.email;
        const password = f.value.password;
        this.authService.signupUser(email, password);
    }
    ngOnInit() {
        this.authService.registerEvent.subscribe(
            (response: string) => { 
                if (response == "completed") {
                    console.log("completed");
                    this._service.success("Hoşgeldiniz.", "Başarıyla kaydoldunuz.", {timeOut:5000, clickToClose:true, showProgressBar: true});
                } else {
                    this._service.error("Hata", response,  {timeOut: 5000, clickToClose: true, showProgressBar: true});
                }
             },
        );
    }
    ngOnDestroy() {
        this.authService.registerEvent.unsubscribe();
    }    
}

And this is auth service

import {Users} from '../../collections/index';
import {Accounts} from 'meteor/accounts-base';
import { Router } from '@angular/router';
import {Injectable, OnInit} from '@angular/core';
import { Meteor } from 'meteor/meteor';
import { Subject } from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
@Injectable()

export class AuthService {
   registerEvent = new Subject();
    constructor (private router: Router) {

    }

    signupUser(Email: string, Password:string) {
        const registerUser =  Accounts.createUser({
                email: Email,
                password: Password
       }, (err) => {
           if (err) {
            this.registerEvent.next(err.message);
            }
        else {
            this.registerEvent.next("completed");
            }
       });
    }

}
tony98789 commented 6 years ago

@jrsakizci I Know this post is old but i am having a similar issue, i think using zone could resolve this issue. You can wrap you call to the service in

`this.zone.run() => {   
      this._service.success("Hoşgeldiniz.", "Başarıyla kaydoldunuz.", {timeOut:5000, clickToClose:true, showProgressBar: true});
 });`

You would need to reference 'NgZone' from core. And then add it your components constructor. Additionally i know this is an old post so did you find another way to resolve this?