2

I am building a web app with Angular2 and Electron and am having problems when opening new windows in which conditional html elements will not be shown until a user interacts with the electron window.

Here is an explanation of the problem: Each of the windows I am trying to open is first created using the following code such that it begins as hidden:

win = new BrowserWindow({width: 1556, height: 882,
    icon: path.join(__dirname, 'assets/app_icon_1024.png'),
    show: false
  });

Then when the window has finished loading, I have it change to a specified route using the Angular2 router and after doing this call win.show(). For most of the windows I am trying to open, the window has a brief loading spinner which displays while the the web app waits for a response from my backend with some sort of database query. Once it receives a response, it changes the value of a boolean used either with an ngClass or with ngIf on an element that is blocking the screen and displaying a spinner so that the returned results can be displayed. Here is an example of a spinner:

<pc-loading-spinner [ngClass]="{'hideLoadingSpinner': !loadingContacts}"></pc-loading-spinner>

Whenever I run the web app on an internet browser and I change routes using a link/the url, everything behaves normally and the spinner disappears when the response is returned. However, whenever I open the window in electron, even after the response is returned and I can see using the debugger that the boolean value has been changed, neither an ngIf will work nor will the hideLoadingSpinner class be added as in the above case. However, if I click on the screen or resize the window after the loading has finished, the spinner will immediately be removed (it only works however if I click on the screen after the loading finishes). On the other hand, If I click on a button to trigger a route with a spinner using electron without opening a new window, everything works correctly and the spinner is removed.

I have found that if I simulate a click anywhere in my app once the spinner has finished this resolves the problem, however I have a number of routes in which the user can open a new window with electron and would rather not have to use such a gimmicky solution in so many places. For example here is code that I use to do this: 

this.elementRef.nativeElement.click()

What could be causing this problem? If there is any more code or information I can provide let me know.

Jonathan Gibson
  • 41
  • 5

1 Answers1

2

It appears that the problem is bigger than I first thought and that it is an issue with all data binding which isn't completely resolved until the user changes routes. Just clicking on the screen solves some of the data binding problems like the one with the spinner but other variables with two way binding still won't work.

However the solution for this question worked for me: Angular 2's two-way binding not working on initial load of electron app. If I place the route change which occurs immediately after the window is created within a run call to NgZone the problem is avoided:

this._ngzone.run(()=>{
     this.router.navigate([args]);
  });
Jonathan Gibson
  • 41
  • 5