Parent listens for child event not working in angular2

Question

I'm struggling with communication by events from child to parent,

I'm using the method mentioned here in this question:

How to listen for child event from parent directive in Angular2

The same method is explained in this official documentation for angular2 :

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent

so here is my parent component template:

Parent.component.html

<div class="tab-content">
    <div id="Mandataire" class="tab-pane fade in active">
        <form class="form-inline">
          <div>
            <h5>Informations personnelles</h5>
            <div>
              <info-identity (notify)="onNotify($event)"></info-identity>
            </div>
            <div>
              <h5>Date de naissance</h5>
              <calendar></calendar>
              <info-mother-name></info-mother-name>
              <info-language></info-language>
            </div>
          </div>
          <div>
            <h5>Numéro de téléphone</h5>
            <phone></phone>
          </div>
          <div>
            <h5>Adresse courriel</h5>
            <email></email>
          </div>
          <div>
            <h5>Autorisations</h5>
            <div class="mandatary-personal_info--autorisation">
              <toggle></toggle>
            </div>
            <button class="btn btn-default pull-right">AJOUTER LE MANDATAIRE</button>
          </div>
        </form>
      </div>

      <div id="Contact" class="tab-pane fade">
        <form class="form-inline">
          <h4>Informations personnelles</h4>
          <info-identity></info-identity>
          <info-language></info-language>
          <br>
          <h4>Numéro de téléphone</h4>
          <phone></phone>
          <br>
          <h4>Adresse courriel</h4>
          <email></email>
          <button type="submit" class="btn btn-default pull-right" onsubmit="this.disabled=true;this.value='Sending Request';" disabled>AJOUTER LE CONTACT</button>
        </form>
      </div>
    </div>
  </div>
</div>

Parent.component.ts

    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);
      }

    }

now I have these child files:

template for child component:

info-identity.component.html

    <div class="form-group info-identity_title">
      <h5>Titre</h5>
      <label for="miss" class="checkbox-field">Mme</label>
      <input type="radio" class="form-control" [(ngModel)]="title" name="title" id="miss" value="miss" />
      <label for="mister" class="checkbox-field">M.</label>
      <input type="radio" class="form-control" [(ngModel)]="title" name="title" id="mister" value="mister" />
    </div>
    <div class="form-group info-identity_firstname">
      <h5>Prénom</h5>
      <input type="text" class="form-control" [(ngModel)]="firstName" maxlength="25" (keypress)="myFunction()">
    </div>
    <div class="form-group info-identity_lastname">
      <h5>Nom</h5>
      <input type="text" class="form-control" [(ngModel)]="lastName" maxlength="25" (keypress)="myFunction()">
    </div>

And this is the type script file for child:

info-identity.component.ts:

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<string> = new EventEmitter<string>();

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes){
      console.log(changes);
  }

  myFunction(){
    this.notify.emit('block of info from the nested component');
  }

}

The problem right now is that the event is emitted, because in the debugger the statement:

this.notify.emit('block of info from the nested component');

is executed

but the parent did not receive the notification.

did anyone have an idea about this behavior ?

Thanks.

Answer 1

You need to pass the input parameters in the parent html to the child.

My child:

@Component({
  selector: 'kg-numberSpinner',
  templateUrl: 'kgNumberSpinner.component.html',
  styleUrls: ['kgNumberSpinner.component.css']
})

export class KgNumberSpinnerComponent implements OnInit {


  @Input('startValue') curValue: number;
  @Input() range: number[];
  @Input() increment: number;
  @Input() spinName;
  @Input() precision: number;
  @Input() theme: string;

  @Output() onChanged = new EventEmitter<NumberSpinnerReturn>();

Parent html:

<div class="ui-grid-row form-group formDiv">
   <div class="ui-grid-col-4 labelDiv">
      <label class="ui-widget labelCheckbox">Carbohydrates:</label>
   </div>
   <div class="ui-grid-col-8 spinnerMargin">
        <kg-numberSpinner spinName="carbGoal" [range]=[10,50] [increment]=5 [startValue]=20 [precision]=0 (onChanged)="onChanged($event)"></kg-numberSpinner>
   </div>
</div>

Parent component:

onChanged(sr: NumberSpinnerReturn) {
    ... code here I need.
}