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

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.