Compiling OK, but Angular doesn't render changes

[aletaschner]

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:

dev tools console:

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

Am I doing something wrong?

Thanks in advance!

[txtcbenne]

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);
    });
  }

[aletaschner]

Great! This actually worked. Thank you very much.

Althought it would be great to know why it doesn't simply work, this already helps me a lot!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.