Trying to pass event from Parent to Child not working. Angular 8

Question

The accordion is the parent component and the child component houses the data therefore I need to know when the parent was updateExpanded(clicked) so that I can call the api. this is to minimize the number of api calls.

I've tried quite a few thing with EventEmitters but it doesn't work the way I want to to. The event fires the whole time even when the parent hasn't been click. The eventemitter makes me think it should only be used to fire an event in the parent from the child. So don't think I am using it right.

Now, I am using @ViewChild to actually access the childs method to fire it. This is working fine but I do get Circular Dependency warnings which also isn't good.

Parent: => PlannedMaintenanceComponent

@ViewChild(forwardRef(() => PlannedMaintenanceDetailComponent), { static: false })
private plannedMaintenanceDetailComponent: PlannedMaintenanceDetailComponent;

updateExpanded(id: string) {

    this.plannedMaintenanceDetailComponent.parentIsExpanded(this.isExpanded, id);
}

Child: => PlannedMaintenanceDetailComponent

 public parentIsExpanded(isExpanded: boolean, id: string) {
    this.plannedMaintenanceId = id;
    //call api
  }

How do I fire an event in the child component when someone clicks on the parent component?

andrès coronado andrès coronado · Accepted Answer · 2020-06-15T06:55:43

I would go with an EventEmitter int the PlannedMaintenanceDetailComponent so you can subscribe to it in the parent component executing a callback when this EventEmitter emits.

export class PlannedMaintenanceDetailComponent {
 isDropped: boolean;
 isDroppedEvent= new EventEmitter<boolean>()
 //..

 onClick() {
   this.isDropped = !isDropped() ;
   isDroppedEvent.emit(isDropped);
 }
}

then in the parent class

private plannedMaintenanceDetailComponent: PlannedMaintenanceDetailComponent;
ngOnInit() {
  plannedMaintenanceDetailComponent.isDroppedEvent.subscribe((isDropped) => {
   if (isDropped){
    call my api
   }
 })    
}

Trying to pass event from Parent to Child not working. Angular 8

1 Answers