How to integrate Electron ipcRenderer into Angular 2 app based on TypeScript?

Question

I want to use ipcMain / ipcRenderer on my project to communicate from Angular to Electron and back.

The Electron side is pretty clear:

const
  electr         


        

Answer 1

A recent package called ngx-electron makes this easy. Link to repo and link to article

src/app/app.module.ts

import { NgxElectronModule } from 'ngx-electron';
// other imports 
@NgModule({
  imports: [NgxElectronModule],
  ...
})

src/app/your.component.ts

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

@Component({
  selector: 'app-your',
  templateUrl: 'your.component.html'
})
export class YourComponent {
    message: string;        

    constructor(private _electronService: ElectronService, private _ngZone: NgZone) { 
        this._electronService.ipcRenderer.on('asynchronous-reply', (event, arg) => {
            this._ngZone.run(() => {
                let reply = `Asynchronous message reply: ${arg}`;
                this.message = reply;
            });
        }
    }

    playPingPong() {
        this._electronService.ipcRenderer.send('asynchronous-message', 'ping');
    }
}

Note: NgZone is used because this.message is updated asynchronously outside of Angular’s zone. article