title: Event emitter not working after using subscribe
body: <p>I have a dialog which has a button on click of which I have to send data to parent, and from there to parent's parent. I'm getting data in parent, but I'm unable to pass it to the top level component.</p>
  <p>my dialog component ts:</p>
  <pre><code>onClickOfButton(){
      this.buttonClicked.emit(this.data)
      }
  </code></pre>
  <p>my parent component ts:</p>
  <pre><code>@Output() dataPreviewReceived = new EventEmitter&lt;any&gt;();
      
  this.dialogRef = this.openDialog(dataOptions);
  
  this.dialogRef.componentInstance.buttonClicked.subscribe((value)=&gt;{
              this.dataPreviewReceived.emit(value)
          })
  </code></pre>
  <p>my top level component html:</p>
  <pre><code>&lt;app-parent (dataPreviewReceived)=&quot;onDataReception($event)&quot;&gt;
      &lt;/app-parent&gt;
  </code></pre>
  <p>my top level component ts:</p>
  <pre><code>onDataReception(data){
      console.log(&quot;received data&quot;,data)
  }
  </code></pre>
  <p>But I'm not able to send to top level from inside .subscribe  function. If I use the same emitter outside through some other function, it gets emitted. What am I doing wrong? Is this the right way to do it? Thank you in advance!</p>