angulartypescriptangular-components

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


Solution

  • 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.