Angular 4 + Electron – Menus and multiple windows in your desktop apps.

Hi Friends,

This again is an update to my previous post on the same topic. In this post we are going to see how to build menus and how to open multiple windows in your application.

Let’s begin

A screencast of this post:

The code for this post is available – here.

Grab a copy of the starter app that we created in one of the previous posts from here.

Now please open app.component.ts file in the project and modify it as shown below.

Let’s break this down.

remote is an electron api used like a bridge between main and renderer processes. In other words, it enables you to use main process from the rendered process.

In this case we have created a File menu which will have a submenu called open. Upon clicking, it will show the open dialog for us. You could build out an elaborate template with various menu items and submenu items like this.

Now we’ll  see how to open multiple windows from a single running instance of the app.

This is where ipc comes in. Ipc stands for inter-process communication and is basically used to communicate between the main and renderer processes.  In simple terms; to send a signal between these two. Let’s see how to make use of this to open a different window in our app.

Modify app.component.ts file as shown below.

Here we are sending a signal with flag called ‘Opengoogle’.

Now open main.js(available in the root of your project directory) and modify it as shown below.

Pretty much straight-forward.

All we have done is created a new window called wintwo (with a smaller dimension) and then run wrote a line of code to show it inside the listener function which listens for ‘Opengoogle’

Before running the app, now we have to specify target as electron-renderer right..?

Wait, how can we edit the webpack config file ?

To do so, kindly give the below command in the console.

This will get the project out of the cli and make it a stand-alone project. i.e., the commands like ng build, ng serve will no longer work.

Now if you notice in the project’s directory there’ll be a file called webpack.config.js. Open it and under module.exports add this line as shown below.

That’s it run the app now.

You will notice that you have an option called File in your menubar. Click on it and try out the two submenu options available under it.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Abhilash D K

    Nice Explanation. I have a one requirement. Rather than sending an ipc request to main process I want to open another component when I click a menu option say “Save Something”. How to achieve that?

  • rajesh

    hi raja,

    when i import import { remote, ipcRenderer } from ‘electron’; its showing error as “TypeError: fs.existsSync is not a function”

    Using electron and ionic , how i can resolve..?if its angular as per ur tutorial i got, pls advice if its ionic how to resolve,
    pls advice how to solve this
    thanks

  • David

    Can you tell us how to do this with Angular 7? ng eject no longer functions.