Angular 5 Update Parent Component value from child Component

Question

Child Component TS

import { Component, OnInit, Input, Output } from '@angular/core';
import { EventEmitter } from 'events';

export class ChildComponent implements OnInit {
    @Output() OpenScheduleCall = new EventEmitter<boolean>();

    onLog() {
          this.OpenScheduleCall.emit(false);
    }
}

parent Component HTML :

<div [(hidden)]="OpenScheduleCall">
// content
</div>
<app-schedule-call *ngIf="!!OpenScheduleCall" [prospectid]='prospectid'  [(OpenScheduleCall)]="OpenScheduleCall"></app-schedule-call>

I am setting the values in child component but changes are not reflecting in parent component

Answer 1

You have not marked OpenScheduleCall as an input to the child component, so first of all you need to do that. And to achieve two-way-binding with banana in the box, your @Output needs to be the @Input variable name, with the suffix Change. So first mark the variable OpenScheduleCall as @Input to child and then change the name for @Output variable:

export class ChildComponent implements OnInit {

  @Input() OpenScheduleCall;
  @Output() OpenScheduleCallChange = new EventEmitter<boolean>();

  onLog() {
   this.OpenScheduleCallChange.emit(false);
  }
}

Now you have two-way-binding:

[(OpenScheduleCall)]="OpenScheduleCall"

Answer 2

Just Output cannot be in two-way data binding. Add also () at the end of the bounded function.

(OpenScheduleCall)="YourFunctionInParent($event)"