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