I want to emit an event after closed a material dialog but doesn't work (maybe because angular code is out of zone?).
if I try this, it works fine (the event is properly attached in the html parent):
onClick(){
this.actionEmitter.emit(result);
}
But if I put this code in afterClosed event:
dialogRef.afterClosed().subscribe(result => {
this.actionEmitter.emit(result);
});
It doesn't work. No error shown but the event stop there. How can I fix it?
Finally I figured out the problem. It wasn't an issue of the out of zone. The hierarchy of components is this:
What's happen was the dialog is opened when mouse enter in the item, in this time lost the focus and in html showOperations was false. The actionEmitter didn't exist anymore.
<div (mouseenter)="showOperations=true" (mouseleave)="showOperations=false">
<!-- item something -->
<child-component *ngIf="showOperations" (actionEmitter)="action($event)"></child-component>
</div>
I've resolved with [hidden] instead of *ngIf:
<child-component [hidden]="!showOperations" (actionEmitter)="action($event)"></child-component>