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

Solution 1

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

(OpenScheduleCall)="YourFunctionInParent($event)"

Solution 2

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"

Comments

[Developer]

i have to set variable value OpenScheduleCall = false. I have to write a setter function to that.?

[Suren Srapyan]

Output is need to get a data from the child. Your child component only has Output parameter, so you can only bind with ().

[Developer]

still, i am confused, when YourFunctionInParent will trigger. can you please make the changes in my code . or suggest any working plnkr.

[Suren Srapyan]

YourFunctionInParent will trigger when the OpenScheduleCall in the child will emit