Posted in Uncategorized

Compiling OK, but Angular doesn’t render changes

   September 23, 2020  1 Comment on Compiling OK, but Angular doesn’t render changes

I’m a little bit confused by a simple test I’ve made and it seems like Angular doesn’t render changes on the screen. I have made a simple code to show.

On home.component.ts

loaded = false;
  ngOnInit() {
    this.electron.ipcRenderer.send('started', true);
    this.electron.ipcRenderer.on('loaded', (e) => {
      console.log('received "loaded" from main');
      this.loaded = true;
      window.setTimeout(() => console.log(this.loaded), 2000);
    });
  }

home.component.html

<div class="container" *ngIf="loaded">
  <h1 class="title">
    {{ 'PAGES.HOME.TITLE' | translate }}
  </h1>
</div>
<div *ngIf="!loaded" class="container">
  <h1 class="title">
    Loading...
  </h1>
</div>

main.ts (inside createWindow function)

ipcMain.on('started', (e) => {
    console.log('received "started" from window');
    setTimeout(() => {
      console.log('few seconds later, sendind loaded to window');
      win.send('loaded', ":D");
    }, 3000);
  });

Even when checking the logs, everything seems to work out great:
node console:
image
dev tools console:
image

Yet, what I get on screen is the “loading…” text and it does not refresh.

Am I doing something wrong?

Thanks in advance!

Full dicussion on github.com

1 possible answer(s) on “Compiling OK, but Angular doesn’t render changes”

  1. I’ve had this issue before as well. I solved it by injecting ChangeDetectorRef and detecting the changes after the data was changed. In your case:

      loaded = false;
  constructor(private electronService: ElectronService, private change: ChangeDetectorRef) { }
  ngOnInit() {
    this.electron.ipcRenderer.send('started', true);
    this.electron.ipcRenderer.on('loaded', (e) => {
      console.log('received "loaded" from main');
      this.loaded = true;
      this.change.detectChanges()
      window.setTimeout(() => console.log(this.loaded), 2000);
    });
  }