CODEWITHSUNDEEP
angulartypescriptangular-components
Mohammad Fareed
Mohammad Fareed

Reputation: 1972

Angular 5 Update Parent Component value from child Component

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

Upvotes: 8

Views: 14660

Answers (3)

Mohammad Fareed
Mohammad Fareed

Reputation: 1972

Incorrect EventEmitter import. It should be imported from '@angular/core' instead of 'events'. The usage of [(hidden)] and *ngIf in the parent component seems redundant. Choose one approach based on your requirements.

Here's the corrected code:

Child Component TS:

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

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)="onScheduleCall($event)"></app-schedule-call>

Parent Component TS:

export class ParentComponent implements OnInit {
    // Assuming you have prospectid defined
    prospectid: any;

    // Boolean property to control visibility
    OpenScheduleCall: boolean = false;

    // Handle the event emitted by the child component
    onScheduleCall(value: boolean) {
        this.OpenScheduleCall = value;
    }
}

With these changes, your child component should be able to emit the event, and the parent component should be able to react to it and update the OpenScheduleCall property accordingly.

Upvotes: 0

AVJT82
AVJT82

Reputation: 73377

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"

Upvotes: 8

Suren Srapyan
Suren Srapyan

Reputation: 68675

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

(OpenScheduleCall)="YourFunctionInParent($event)"

Upvotes: 3

Related Questions