I have an app-file-actionscomponent which emit topropertyEvent if dialog res is true then app-general-details component which has an output and then app-general-details is rendered by the parent component which is app-main-details and then on app-main-details I have an event that gets the ouput from app-general-details which is inspectionPropertyGeneralDetailsEvent(event:any) and then everytime this method is called it will pass an input to app-property-details and then app-property-details will detect that changes.

But the issue is that ngOnchanges only triggered and detected once even though the input has been updated. Any idea guys ?

#app-file-actions(ts)

  @Output() propertyEvent = new EventEmitter<any>();
  add() {
    const confirmDialog = this.dialog.open(AddPropertyDialogComponent, {
      autoFocus: false
    });

    confirmDialog.afterClosed().subscribe((res) => {
      if (res) {
        this.propertyEvent.emit(res);
      }
    });
  }

#app-general-details (html)

<app-file-actions (propertyEvent)="propertyEvent($event)"></app-file-actions>

#app-general-details (ts)

 @Output() inspectionPropertyGeneralDetailsEvent = new EventEmitter<any>();

 propertyEvent(event:any){
    this.inspectionPropertyGeneralDetailsEvent.emit(event);
  }

#app-main-details(html)

 <div>
    <app-general-details (inspectionPropertyGeneralDetailsEvent)="inspectionPropertyGeneralDetailsEvent($event)"></app-general-details> 

    <app-property-details [hasChanges]="hasChanges"></app-property-details>
</div>

#app-main-details(ts)

inspectionPropertyGeneralDetailsEvent(event:any) {
    this.hasChanges= event;
  }

#app-property-details (ts)

@Input() hasChanges: boolean;

ngOnChanges(changes: SimpleChanges) {
    if(changes.hasChanges&& changes.hasChanges.currentValue) {
      console.log('here')
      this.getData();
 }