Angular - electron view does not update after model changes

Question

I have a field that enables me to choose a folder from an electron dialog. On clicking the field, the dialog opens and I'm able to select the folder. However, upon hitting ok, even though my model contains the folder's path, it does not reflect in the input field, until I click OUTSIDE the field (when it loses focus). How exactly do I fix this behaviour?

Template contains:

<input type="text" class="form-control" (click)="onClickPath($event)" [(ngModel)]="currentConfiguration.workspacePath" id="workspace-path" name="workspace-name" aria-label="workspace" aria-describedby="workspace-lable">

CurrentConfiguration.ts

export class CurrentConfiguration {
    workspacePath: string;
}

configuation.component.ts

currentConfiguration: CurrentConfiguration = {
        workspacePath: ""
    };

//onClickedPath event: 

    onClickPath(event) {
            console.log("clicked: ", event.target.id);

            // open the dialog to select the directory
            const dir = this.electronService.remote.dialog.showOpenDialog({
                properties: ["openDirectory"],
                title: event.target.id.split('-').join(" ")
            }, (folderPath) => {
                console.log(folderPath);

                if (folderPath[0] == undefined) {
                    this.electronService.remote.dialog.showMessageBox({
                        type: "error",
                        buttons: ["ok"],
                        title: "Error",
                        message: "Please select the folder"

                    });
                }
                else{
                    // set the correct directoryPath. 
                    this.currentConfiguration[event.target.id.split('-')[0] + 'Path'] = folderPath[0];
                }
            });

        }

You can try inject the changeDetectorRef and call the detectesChanges : https://angular.io/api/core/ChangeDetectorRef to force angular to start a new digest cycle — xrobert35, Sep 24 '18 at 14:22
@xrobert35 thats not needed unless something isnt within the angular scope — mast3rd3mon, Sep 24 '18 at 14:24
Yes, true, but since everything look up to date is in model and the view is only changing after an event it look like a change detection problem. And I dont know what code is being this electronService, Perhaps it's running outside the angular scope — xrobert35, Sep 24 '18 at 14:32
@xrobert35 - I did some more research and it appears that you are indeed correct. [This answer](https://stackoverflow.com/a/41255540/1745073) helped me resolve my issue. — blueren, Sep 25 '18 at 12:38

score 1 · Answer 1 · answered Sep 25 '18 at 12:47

Note - this is a almost a dupe of This question Since it helped me resolve the issue, I'll post the answer.

Electron dialogs seem to function outside the angular zone and hence any updates to the data does no trigger angular to refresh the view.

In order to make the refresh happen, I had to execute the logic inside a zone like below:

import { NgZone } from '@angular/core';
...
...
currentConfiguration: CurrentConfiguration = {
        workspacePath: ""
    };

//onClickedPath event: 

    onClickPath(event) {
            console.log("clicked: ", event.target.id);

            // open the dialog to select the directory
            const dir = this.electronService.remote.dialog.showOpenDialog({
                properties: ["openDirectory"],
                title: event.target.id.split('-').join(" ")
            }, (folderPath) => {
                console.log(folderPath);

                if (folderPath[0] == undefined) {
                    this.electronService.remote.dialog.showMessageBox({
                        type: "error",
                        buttons: ["ok"],
                        title: "Error",
                        message: "Please select the folder"

                    });
                }
                else{
                   // run all of this inside the zone
                   this.zone.run(() => {
                    // set the correct directoryPath. 
                    this.currentConfiguration[event.target.id.split('-')[0] + 'Path'] = folderPath[0];
                    }); // end of zone
                }

            });

        }

Angular - electron view does not update after model changes

1 Answers1

Linked