Electron App
Send Menu Command to Angular App

TL;DR: In the main process use mainWindow.webContents.send('cmd') and in your Angular component (renderer process) bind it to a method with ipcRenderer.on('cmd', this.open.bind(this)) (where open() is a method).

I need to make my angular app work when a menu item is clicked (think: I click on “Open” and my angular app needs to perform the actual operation). The problem I’ve encountered is the menu actions happen in the main process while my angular code lives in the renderer process. Thus, I need to make the two communicate :)

In my main code, I have something like:

which translates in:

Make it so when I click “Open” on my menu, I will send an IPC message containing “open-file” to my renderer process.

In my @Component class constructor (renderer) I do the binding:

This practically says:

If I get an IPC message containing “open-file”, call the open() method.

Now, you can receive commands from the menu too :) Just be careful to separate the concerns (e.g. you don’t have access to app in renderer ).


A little experiment: If you find this post and ad below useful, please check the ad out :-)

2 thoughts on “Electron App
Send Menu Command to Angular App

  1. do you have a repo for this example because in component i am unable to get electron. using angular 4 and electron 1.6.11

    1. Unfortunately I don’t. I’m using electron 1.6.6 and angular 4.0.0. Which version of angular are you using?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top