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

score 8 · Answer 1 · answered Feb 05 '18 at 12:41

8

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"

answered Feb 05 '18 at 12:41

AT82

71,416
24
140
167

Of note to anyone new to this: this only works when the Input/Output variable names match, but the output has `Change` at the end. In this example naming the Output `OpenScheduleCallEvent` would **not** work! – Chris Barr Mar 01 '19 at 14:46
@ChrisBarr I believe I have mentioned that in my answer, maybe not clearly enough (?) But thank you for your input! :) – AT82 Mar 01 '19 at 16:18
lol, you are right - sorry! I just used your code without reading your description, changed the var names to my liking and then remembered this trick and posted it here. – Chris Barr Mar 01 '19 at 17:03

score 3 · Accepted Answer · answered Feb 05 '18 at 08:07

3

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

(OpenScheduleCall)="YourFunctionInParent($event)"

answered Feb 05 '18 at 08:07

Suren Srapyan

66,568
14
114
112

i have to set variable value `OpenScheduleCall = false`. I have to write a setter function to that.? – Mohammad Fareed Feb 05 '18 at 08:09
Output is need to get a data from the child. Your child component only has Output parameter, so you can only bind with `()`. – Suren Srapyan Feb 05 '18 at 08:12
still, i am confused, when `YourFunctionInParent` will trigger. can you please make the changes in my code . or suggest any working plnkr. – Mohammad Fareed Feb 05 '18 at 08:50
1

`YourFunctionInParent ` will trigger when the `OpenScheduleCall` in the child will emit – Suren Srapyan Feb 05 '18 at 09:29

Angular 5 Update Parent Component value from child Component

2 Answers2