Angular 2's two-way binding not working on initial load of electron app

Question

I have the following files:

topnav.component.ts

import { Component } from '@angular/core';
import { EnvironmentService } from '../services/ipc/environment.service';

const { ipcRenderer } = electron;

@Component({
  selector: 'app-topnav',
  templateUrl: './topnav.component.html',
  styleUrls: ['./topnav.component.scss']
})
export class TopnavComponent {
  version: string = null;

  constructor(private environmentService: EnvironmentService) {
    this.environmentService.getVersionInfo();

    ipcRenderer.on('environment-reply', (event, arg) => {
      console.log(arg);
      this.version = arg;
    });
  }
}

topnav.component.html

...
    <div *ngIf="version">{{version}}</div>
...

In the code, I am retrieving versioning info about the environment that I am running on and updating the version property and hoping that it updates in my view. The called to getVersionInfo() is async and uses the ipcMain and ipcRenderer communication constructs in electron. I am able to verify that these are working as expected. There are no errors from neither angular nor electron.

I have verified that the version is indeed coming back in the arg param and being logged to the console as expected; however, it is not showing up in the view until I navigate around my app. This leads me to believe it has something to do with the component lifecycle and change detection in Angular 2. However, I am a bit of a newbie to both Angular 2 and Electron.

Any pointers or ideas as to what might be going on and how to fix it?

score 8 · Accepted Answer · answered Mar 12 '17 at 05:22

8

Havent used electron.. But try ngZone.

import { Component,NgZone } from '@angular/core';

And in your constructor,

constructor(private environmentService: EnvironmentService,private _ngzone:NgZone) {
    this.environmentService.getVersionInfo();

    ipcRenderer.on('environment-reply', (event, arg) => {
      console.log(arg);
      this._ngzone.run(()=>{
         this.version = arg;
      });
    });
  }

Electron maybe updating the value outside the 'zone' and angular may not be able to detect it.

answered Mar 12 '17 at 05:22

Suraj Rao

29,388
11
94
103

This workaround does the job but we are forced to call this run() method each time... I tried the solution described here without success: http://stackoverflow.com/questions/41906986/two-way-data-binding-angular-2-in-electron-not-working... Would be nice to know exactly what makes Angular "not aware" of the affected zone like javascript libraries initialization order... – A. Masson May 19 '17 at 11:31
1

I think this would help https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html – Suraj Rao May 19 '17 at 11:41
Angular performs a change detection in order to update the DOM.. but since electron is a completely different framework..It doesnt really work with Angular's change detection. So you have to manually perform the required updation within the ngzone.run – Suraj Rao May 19 '17 at 11:43
This also works for cordova's `document.addEventListener('resume')` to open a custom Dialog component, whose text wasn't being interpolated. – Michelle Norris Apr 30 '18 at 17:48

Angular 2's two-way binding not working on initial load of electron app

1 Answers1

Linked