Issue
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.
Answered By - Mohammad Fareed
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.