Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

why angular ngOnchange is only triggering once?

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)

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

  @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();
 }

>Solution :

I’m sorry but I don’t have the reputation to add a comment so I must do like this…

Can you maybe add the app-general-details(html) file so we can see what event is actually causing the event emitter to fire?

Also check if the actual value of the event actually changes more than once… If you assign the same value twice to the event parameter, ngOnChanges wont fire again, so maybe that’s your problem.

If else, please refer to this question

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading