Angular 2 call a function/method when an event is emitted
<p>I have a component which can be removed from the page when a close button is clicked. I have exposed a <code>testClose</code> event that a user can register to do some work when the component is closed. How do I register to that event to call a function when the component is closed? For example, I would like to increment the closeCounter by 1 when the TestComponent is closed. Here is the plnkr:</p>

<p><a href="https://plnkr.co/edit/iGyzIkUQOTCGwaDqr8o0?p=preview" rel="nofollow">https://plnkr.co/edit/iGyzIkUQOTCGwaDqr8o0?p=preview</a></p>

<p>TestComponent which exposes an event:</p>

<pre><code>import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'test',
  template: `
      &lt;div class="box" *ngIf="!_close"&gt;
        &lt;button class="close" (click)="close()"&gt;x&lt;/button&gt;
      &lt;/div&gt;
    `,
    styles:[
      `
        .box{
          background: yellow;
          height: 100px;
          width: 100px;
        }
      ` 
    ]
})
export class TestComponent{

  @Input("testClose") _close = false;
  @Output("testCloseChange") _closeChange = new EventEmitter&lt;boolean&gt;(false);

  close(): void{
    this._close = true;
    this._closeChange.emit(true);
  }

  open(): void{
    this._close = false;
    this._closeChange.emit(true);
  }

}
</code></pre>

<p>App Component which should register to the close event of the TestComponent to call some function.</p>

<pre><code>import {Component} from 'angular2/core';
import {TestComponent} from './test.component';

@Component({
    selector: "my-app",
    template: `
      &lt;div class="container"&gt;
        &lt;test [testClose]="isClose"&gt;&lt;/test&gt;
        Close Count: {{closeCount}}
      &lt;/div&gt;
    `,
    directives: [TestComponent]
})
export class AppComponent{

  isClose: boolean = false;
  closeCount: number = 0;

  incrementClose(): void{
    this.closeCount++;
  }

}
</code></pre>