Why are my values not updating on init (Angular + Electron)?

Question

setting.component.ts

import { Component, OnInit } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-setting',
  templateUrl: './setting.component.html',
  styleUrls: ['./setting.component.css']
})
export class SettingComponent implements OnInit {
  private primaryServer: string;
  private secondaryServer: string;

  constructor(
    private electron: ElectronService
  ) { }

  ngOnInit() {
    this.electron.ipcRenderer.send("asynchronous-message", {get: "settings"})
    this.electron.ipcRenderer.on("asynchronous-reply", (event, data) => {
      this.primaryServer = data.database.primary;
      this.secondaryServer = data.database.secondary;
    })
  }
}

setting.component.html

<p>{{primaryServer}}</p>
<p>{{secondaryServer}}</p>

My "primaryServer" and "secondaryServer" values do not show up when the page loads. however, when I click on the input or a random button for it, it shows up. How do I get them to show up on init?

Your code might run outside of Angulars zone and therefore Angular doesn't recognize it needs to run change detection. You can use `zone.run(() => { your code that updates the model here })` to force code back into the zone. If this works you can investigate further why it runs outside Angulars zone. — Günter Zöchbauer, Mar 06 '18 at 16:34
Possible duplicate of [Angular 2 Change Detection Breaks Down with Electron](https://stackoverflow.com/questions/41254904/angular-2-change-detection-breaks-down-with-electron) — Mateusz Witkowski, Mar 06 '18 at 16:42
https://github.com/angular/zone.js/blob/master/NON-STANDARD-APIS.md#usage-1 may help you — Explosion Pills, Mar 06 '18 at 16:44

score 5 · Answer 1 · answered Mar 06 '18 at 17:07

import { Component, OnInit, NgZone } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-setting',
  templateUrl: './setting.component.html',
  styleUrls: ['./setting.component.css']
})
export class SettingComponent implements OnInit {
  private primaryServer: string;
  private secondaryServer: string;

  constructor(
    private electron: ElectronService,
    private zone: NgZone
  ) { }

  ngOnInit() {
    this.electron.ipcRenderer.send("asynchronous-message", {get: "settings"})
    this.electron.ipcRenderer.on("asynchronous-reply", (event, data) => {
      this.zone.run(()=>{
        this.primaryServer = data.database.primary;
        this.secondaryServer = data.database.secondary;
      })
    })
  }
}

This is the changes I made for it to update properly as said by

Your code might run outside of Angulars zone and therefore Angular doesn't recognize it needs to run change detection. You can use zone.run(() => { your code that updates the model here }) to force code back into the zone. If this works you can investigate further why it runs outside Angulars zone. – Günter Zöchbauer

Thank you for including the final result that worked for you based on your question, I think a lot of stack-overflow questions/answers could benefit from this format! — Jessy, Oct 20 '19 at 14:04

Why are my values not updating on init (Angular + Electron)?

1 Answers1