title: How can I emit an event passing the emitter inside a function in Angular 2
body: <p>Component PARENT (template):</p>
  
  <pre><code>&lt;CHILD&gt;&lt;/CHILD&gt;
  &lt;overlayer *ngIf="showPopup" (evTogglePopup)="onShowPopup($event)"&gt;&lt;/overlayer&gt;
  </code></pre>
  
  <p>Component CHILD (@Component):</p>
  
  <pre><code>@Output() evTogglePopup = new EventEmitter();
  ...
  this.inputUt.ajaxCheckExistingEmail(email, this.evTogglePopup);
  </code></pre>
  
  <p>a funtion of MyInputUtility (a provider @Injectable imported and used into CHILD):</p>
  
  <pre><code>ajaxCheckExistingEmail(email, evEmitter:EventEmitter&lt;any&gt;){
          if (email.valid){
              return this.http.post(
                  GLOBAL_CONST.apiPath + "/user/user/api-check-user-email",
                  'email=' + email.value,
                  {headers: this.headers}
              ).map(response =&gt; response.json())
              .subscribe(val =&gt; {
                  console.log(val);
                  if( val.emailExists ){
                      evEmitter.emit(true);
                  }
              });
          }
  }
  </code></pre>
  
  <p>This "solution" doesn't work, and I was wondering if it's because evEmitter is passed by copy to the ajaxCheckExistingEmail function.</p>
  
  <p><strong>Sosterd by myself</strong><br>
  The problem was that "overlayer" is a different selector form that one pointed by CHILD (selector), and I thought it would have worked as well.</p>
  
  <p>I changed like this below and now it works:</p>
  
  <pre><code>&lt;CHILD (evTogglePopup)="onShowPopup($event)"&gt;&lt;/CHILD&gt;
      &lt;overlayer *ngIf="showPopup"&gt;&lt;/overlayer&gt;
  </code></pre>