Angular 2
Refresh Bound Variables from Callback

Posted by in Software

TL;DR: Use ChangeDetectorRef‘s detectChanges() at the end of your callback code.

While developing my electron.js app, I’ve had the following workflow:

  • I have an input element and a button
  • The input element is capable of editing a path
  • The button triggers a File Open dialog

The problem I had was the showOpenDialog() accepts a callback and I couldn’t get the input field to update once the user has picked a file. Fortunately, the smart angular developers have thought of this situation too and the solution is quite simple. You have to use ChangeDetectorRef like so:

The this.ref.detectChanges() at the end of the callback is the key to propagating the changes back throughout your angular code.


A little experiment: If you find this post and ad below useful, please check the ad out :-)