event emitter works one time but not a second time Angular 8

Question

I have this variable which controls if a dialog shows up or not, it works on the first time, but not on a second time, emit excutes but the receiveing function is no longer called.

parent class:

  isLogin :boolean ;

  constructor(...){
    this.isLogin = false;
}
  receiveNotification(notification: boolean): void {
    this.isLogin = notification;
  }

parent html:

<login-dialog   *ngIf="!isLogin"  name="{{name}}" (notify)="receiveNotification($event)"></login-dialog>

in the child class: I have a function that when triggered calls emit and emit is indeed called just doesn't trigger the function on the parent on a second time

@Output() notify = new EventEmitter<any>();

  exampleFunction(){
 this.notify.emit(true);
}

I think maybe this is connected to the ngIf but not sure, what is wrong here?

score 4 · Accepted Answer · answered Jul 25 '19 at 10:59

4

It could be because you are emitting a true value but on the parent template you are checking for !true which is false.

As per your current logic, you should either emit a false value or change the condition to *ngIf="isLogin" in the parent template.

answered Jul 25 '19 at 10:59

Nicholas K

15,148
7
31
57

score 2 · Answer 2 · answered Jul 25 '19 at 11:27

2

Try to use hidden instead of ngIf, because ngIf remove the component from the DOM but hidden just hide it.

<login-dialog   [hidden]="isLogin"  name="{{name}}"...></login-dialog>

answered Jul 25 '19 at 11:27

ilyas shabi

194
1
7

event emitter works one time but not a second time Angular 8

2 Answers2