title: Can you have multiple @outputs in a child component? I have two and one doesn't work
body: <p>This is the child component:</p>
  
  <pre><code>@Component({
    selector: 'kg-dateSpinner',
    templateUrl: 'kgDateSpinner.component.html',
    styleUrls: ['kgDateSpinner.component.css']
  })
  
  export class KgDateSpinnerComponent implements OnInit {
    @Output() onChanged = new EventEmitter&lt;DateSpinnerReturn&gt;();
    @Output() onLoadFood = new EventEmitter&lt;DateSpinnerReturn&gt;();
  
    sr: DateSpinnerReturn;
    userSettings: User;
    cd = moment();
    currentDate: string = this.cd.format("MMMM DD, YYYY");;
    dateSpinnerForm: FormGroup;
  
    constructor(
      private ts: ThemeService,
      private fb: FormBuilder,
      private ss: SettingsService) {
  
      this.sr = new DateSpinnerReturn();
    }
  
  
    ngOnInit() {
      this.dateSpinnerForm = this.fb.group({
        currentDate: [this.currentDate, []]
      });
    }
  
    onLoadFoodRequest() {
      this.sr.spinValue = this.currentDate;
      this.onLoadFood.emit(this.sr)
    }
  
    onDateSelected(event: any) {
      this.cd = moment(event);
      this.returnEvent();
    }
  
    onIncrement() {
      this.cd = this.cd.add(1, 'day');
      this.returnEvent();
    }
  
    onDecrement() {
      this.cd = this.cd.subtract(1, 'day');
      this.returnEvent();
    }
  
    returnEvent() {
      this.currentDate = this.cd.format("MMMM DD, YYYY");
      this.dateSpinnerForm.controls['currentDate'].setValue(this.currentDate, { onlySelf: true });
      this.sr.spinValue = this.currentDate;
      this.onChanged.emit(this.sr)
    }
  </code></pre>
  
  <p>The child component html:</p>
  
  <pre><code>&lt;form [formGroup]="dateSpinnerForm" class="ui form" novalidate&gt;
     &lt;button pButton (click)="onDecrement()" icon="fa-backward"&gt;&lt;/button&gt;
     &lt;div style="padding-top: 10px;width: 208px; display: inline-block;"&gt;
        &lt;p-calendar formControlName="currentDate" showAnim="slideDown" (onSelect)="onDateSelected($event)" [showIcon]="true" [readonlyInput]="true" dateFormat="MM d, yy"&gt;&lt;/p-calendar&gt;
     &lt;/div&gt;
  
     &lt;button pButton (click)="onIncrement()" icon="fa-forward"&gt;&lt;/button&gt;
     &lt;button pButton (click)="onLoadFoodRequest()" icon="fa-cutlery" iconPos="left"&gt;&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The parent component:</p>
  
  <pre><code>onChanged(sr: DateSpinnerReturn) {
     this.diaryDate = sr.spinValue;
  }
  
  onLoadFood(sr: DateSpinnerReturn) {
     this.diaryDate = sr.spinValue;
  }
  </code></pre>
  
  <p>Parent html:</p>
  
  <pre><code> &lt;header&gt;
      &lt;kg-dateSpinner&gt;&lt;/kg-dateSpinner&gt; 
   &lt;/header&gt;
  </code></pre>
  
  <p>The onChanged event receives data from the child, but the onLoadFood doesn't.
  The button press on the child component activates the LoadFoodRequest function and doesn't error, the event never makes it to parent. Any ideas?</p>