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!
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: