title: EventEmiitter is not working in angular 4
body: <p>Hello I am new in angular 4 
  I am trying implementing event emitter concept but it is not working.</p>
  
  <p>I have following code in my demo </p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
      changeYearEvent($event: any) {
          console.log("called emit");
          console.log($event);
      }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div (yearHandler)="changeYearEvent($event);" class='container-fluid'&gt;
      &lt;div class='row'&gt;
          &lt;div class='col-sm-3'&gt;
              &lt;nav-menu&gt;&lt;/nav-menu&gt;
          &lt;/div&gt;
          &lt;div class='col-sm-9 body-content'&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>fetchdata.component.ts</strong></p>
  
  <pre><code>import { Component, Inject, Output, EventEmitter } from '@angular/core';
  import { Http } from '@angular/http';
  
  @Component({
      selector: 'fetchdata',
      templateUrl: './fetchdata.component.html'
  })
  export class FetchDataComponent {
      public forecasts: WeatherForecast[];
      @Output() yearHandler = new EventEmitter();
      constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
          http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result =&gt; {
              this.forecasts = result.json() as WeatherForecast[];
          }, error =&gt; console.error(error));
      }
  
      eventofClick() {
          console.log("emit call", "call");
          this.yearHandler.emit("hii");
      }
  }
  
  interface WeatherForecast {
      dateFormatted: string;
      temperatureC: number;
      temperatureF: number;
      summary: string;
  }
  </code></pre>
  
  <p><strong>fetchdata.component.html</strong></p>
  
  <pre><code>&lt;h1&gt;Weather forecast&lt;/h1&gt;
  
  &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
  
  &lt;p *ngIf="!forecasts"&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
  &lt;a (click)="eventofClick()"&gt;Hello&lt;/a&gt;
  &lt;table class='table' *ngIf="forecasts"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Temp. (C)&lt;/th&gt;
              &lt;th&gt;Temp. (F)&lt;/th&gt;
              &lt;th&gt;Summary&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let forecast of forecasts"&gt;
              &lt;td&gt;{{ forecast.dateFormatted }}&lt;/td&gt;
              &lt;td&gt;{{ forecast.temperatureC }}&lt;/td&gt;
              &lt;td&gt;{{ forecast.temperatureF }}&lt;/td&gt;
              &lt;td&gt;{{ forecast.summary }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I declared yearHandler as @output variable in fetchdata.component.ts 
  then implemented  eventofClick() event , from that function i emmit event</p>
  
  <p>yearHandler  declared in app.component.html that call changeYearEvent($event);</p>
  
  <p>and when changeYearEvent is called it display message in console.log
  but it is not calling changeYearEvent </p>
  
  <p>Can anyone please help me what is wrong in this.</p>
  
  <p>Thank You.</p>