Can you have multiple @outputs in a child component? I have two and one doesn't work

Question

This is the child component:

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

export class KgDateSpinnerComponent implements OnInit {
  @Output() onChanged = new EventEmitter<DateSpinnerReturn>();
  @Output() onLoadFood = new EventEmitter<DateSpinnerReturn>();

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

The child component html:

<form [formGroup]="dateSpinnerForm" class="ui form" novalidate>
   <button pButton (click)="onDecrement()" icon="fa-backward"></button>
   <div style="padding-top: 10px;width: 208px; display: inline-block;">
      <p-calendar formControlName="currentDate" showAnim="slideDown" (onSelect)="onDateSelected($event)" [showIcon]="true" [readonlyInput]="true" dateFormat="MM d, yy"></p-calendar>
   </div>

   <button pButton (click)="onIncrement()" icon="fa-forward"></button>
   <button pButton (click)="onLoadFoodRequest()" icon="fa-cutlery" iconPos="left"></button>
</form>

The parent component:

onChanged(sr: DateSpinnerReturn) {
   this.diaryDate = sr.spinValue;
}

onLoadFood(sr: DateSpinnerReturn) {
   this.diaryDate = sr.spinValue;
}

Parent html:

 <header>
    <kg-dateSpinner></kg-dateSpinner> 
 </header>

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?

Answer 1

You have to bind your parent to your child component, change your parent html to this:

 <header>
    <kg-dateSpinner (onChanged)="onChanged($event)" (onLoadFood)="onLoadFood($event)"></kg-dateSpinner> 
 </header>

So inside the parenthesis is your child output name, inside the quotes is your parent function