Parent listens for child event not working in angular2
<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>