title: Parent listens for child event not working in angular2
body: <p>I'm struggling with communication by events from child to parent,</p>
  
  <p>I'm using the method mentioned here in this question:</p>
  
  <p><a href="https://stackoverflow.com/questions/37781522/how-to-listen-for-child-event-from-parent-directive-in-angular2">How to listen for child event from parent directive in Angular2</a></p>
  
  <p>The same method is explained in this official documentation for angular2 :</p>
  
  <p><a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent</a></p>
  
  <p>so here is my parent component template:</p>
  
  <p><strong>Parent.component.html</strong></p>
  
  <pre><code>&lt;div class="tab-content"&gt;
      &lt;div id="Mandataire" class="tab-pane fade in active"&gt;
          &lt;form class="form-inline"&gt;
            &lt;div&gt;
              &lt;h5&gt;Informations personnelles&lt;/h5&gt;
              &lt;div&gt;
                &lt;info-identity (notify)="onNotify($event)"&gt;&lt;/info-identity&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;h5&gt;Date de naissance&lt;/h5&gt;
                &lt;calendar&gt;&lt;/calendar&gt;
                &lt;info-mother-name&gt;&lt;/info-mother-name&gt;
                &lt;info-language&gt;&lt;/info-language&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h5&gt;Numéro de téléphone&lt;/h5&gt;
              &lt;phone&gt;&lt;/phone&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h5&gt;Adresse courriel&lt;/h5&gt;
              &lt;email&gt;&lt;/email&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;h5&gt;Autorisations&lt;/h5&gt;
              &lt;div class="mandatary-personal_info--autorisation"&gt;
                &lt;toggle&gt;&lt;/toggle&gt;
              &lt;/div&gt;
              &lt;button class="btn btn-default pull-right"&gt;AJOUTER LE MANDATAIRE&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
        &lt;div id="Contact" class="tab-pane fade"&gt;
          &lt;form class="form-inline"&gt;
            &lt;h4&gt;Informations personnelles&lt;/h4&gt;
            &lt;info-identity&gt;&lt;/info-identity&gt;
            &lt;info-language&gt;&lt;/info-language&gt;
            &lt;br&gt;
            &lt;h4&gt;Numéro de téléphone&lt;/h4&gt;
            &lt;phone&gt;&lt;/phone&gt;
            &lt;br&gt;
            &lt;h4&gt;Adresse courriel&lt;/h4&gt;
            &lt;email&gt;&lt;/email&gt;
            &lt;button type="submit" class="btn btn-default pull-right" onsubmit="this.disabled=true;this.value='Sending Request';" disabled&gt;AJOUTER LE CONTACT&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Parent.component.ts</strong></p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
  
      @Component({
        selector: 'mandataire',
        templateUrl: './mandataire.component.html',
        styleUrls: ['./mandataire.component.scss']
      })
      export class MandataireComponent implements OnInit {
  
        constructor() { }
  
        ngOnInit() {
        }
  
        onNotify(message:string):void {
          console.log(message);
        }
  
      }
  </code></pre>
  
  <p>now I have these child files:</p>
  
  <p><strong>template for child component:</strong></p>
  
  <p><strong>info-identity.component.html</strong></p>
  
  <pre><code>    &lt;div class="form-group info-identity_title"&gt;
        &lt;h5&gt;Titre&lt;/h5&gt;
        &lt;label for="miss" class="checkbox-field"&gt;Mme&lt;/label&gt;
        &lt;input type="radio" class="form-control" [(ngModel)]="title" name="title" id="miss" value="miss" /&gt;
        &lt;label for="mister" class="checkbox-field"&gt;M.&lt;/label&gt;
        &lt;input type="radio" class="form-control" [(ngModel)]="title" name="title" id="mister" value="mister" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group info-identity_firstname"&gt;
        &lt;h5&gt;Prénom&lt;/h5&gt;
        &lt;input type="text" class="form-control" [(ngModel)]="firstName" maxlength="25" (keypress)="myFunction()"&gt;
      &lt;/div&gt;
      &lt;div class="form-group info-identity_lastname"&gt;
        &lt;h5&gt;Nom&lt;/h5&gt;
        &lt;input type="text" class="form-control" [(ngModel)]="lastName" maxlength="25" (keypress)="myFunction()"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is the type script file for child:</p>
  
  <p><strong>info-identity.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'info-identity',
    templateUrl: './info-identity.component.html',
    styleUrls: ['./info-identity.component.scss']
  })
  export class InfoIdentityComponent implements OnInit, OnChanges {
    @Input() public firstName = '';
    @Input() public lastName = '';
    public title = '';
  
    @Output() notify: EventEmitter&lt;string&gt; = new EventEmitter&lt;string&gt;();
  
    constructor() { }
  
    ngOnInit() {
    }
  
    ngOnChanges(changes){
        console.log(changes);
    }
  
    myFunction(){
      this.notify.emit('block of info from the nested component');
    }
  
  }
  </code></pre>
  
  <p>The problem right now is that the event is emitted, because in the debugger the statement:</p>
  
  <p><code>this.notify.emit('block of info from the nested component');</code> </p>
  
  <p>is executed</p>
  
  <p>but the parent did not receive the notification.</p>
  
  <p>did anyone have an idea about this behavior ?</p>
  
  <p>Thanks.</p>