The Techies' pub

Angular 2 – Creating menus and notifications in desktop apps

This post is an update to my previous post on creating a desktop app using the angular 2 and electron framework. In this post I will show you how to create menus in your desktop apps.

A screencast of this tutorial:

(Thumbnail image credit – Freepik)

The code of this tutorial can be found here
Okay, let’s start from where we left off. To get a copy of the desktop app which we created using electron and angular 2 (RC) framework click here.

Once you have got the repo open typings.json file and add the below line to the global dependencies as shown below.

1

2

3

4

5

6

7

8

{

"globalDependencies":{

"core-js":"registry:dt/core-js#0.0.0+20160317120654",

"jasmine":"registry:dt/jasmine#2.2.0+20160505161446",

"node":"registry:dt/node#4.0.0+20160509154515",

"github-electron":"registry:dt/github-electron#0.37.6+20160417155838"

}

}

Now run the below command to get the typings installed.

1

typings install

(please note that if you don’t have the typings npm module installed then you should probably install it using npm install -g typings and then run the above command).

Now that you have installed the typings you are ready to use electron along with typescript. Open up your app.ts file and modify it as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

import{bootstrap}from'@angular/platform-browser-dynamic';

import{Component}from'@angular/core';

import{remote,ipcRenderer}from'electron';

let{dialog}=remote;

@Component({

selector:'myapp',

template:'<h1>Angular 2 app inside a desktop app</h1>'

})

exportclassAppComponent{

constructor(){

varmenu=remote.Menu.buildFromTemplate([{

label:'Raja',

submenu:[

{

label:'open',

click:function(){

dialog.showOpenDialog((cb)=>{

})

}

}

]

}])

remote.Menu.setApplicationMenu(menu);

}

}

bootstrap(AppComponent);

Let’s break this down.

First we are importing remote and ipcRenderer from electron. These are actually part of the electron API.

In the constructor function we then create a menu item with the label Raja and then add a submenu called open.

Upon clicking the submenu we show the openfiledialog.

We then set this menu to appear on our app using remote.Menu.setApplicationMenu(menu);

Now if we run this we could see our menu appearing in our app as shown in the below image.

Upon clicking on that we would be able to see our open file dialog window.

Okay, this is all good. What if we wanted to open our own custom window.

First of all let’s create our own window. Open up index.js file and modify it as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

varelectron=require('electron');

varapp=electron.app;

varBrowserWindow=electron.BrowserWindow;

app.on('ready',()=>{

varmainWindow=newBrowserWindow({

width:1280,

height:720

})

mainWindow.loadURL('file://'+__dirname+'/app/index.html');

varsecondWindow=newBrowserWindow({

width:800,

height:600,

show:false

})

secondWindow.loadURL('file://'+__dirname+'/app/second.html');

});

Note that we have turned the show option to false so that our window doesn’t get displayed as soon as the app ready is triggered.

Now create a html file called second.html inside the app directory and add some random content in it.

Okay open up app.ts file again and add another submenu as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

constructor(){

varmenu=remote.Menu.buildFromTemplate([{

label:'Raja',

submenu:[

{

label:'open',

click:function(){

dialog.showOpenDialog((cb)=>{

})

}

},

{

label:'opencustom',

click:function(){

ipcRenderer.send('open-custom');

}

}

]

}])

remote.Menu.setApplicationMenu(menu);

}

Now if you notice we are using ipcRenderer.send to send a signal using the flag open-custom. ipc(Inter-process communicator) is used to communicate this between the renderer process and the main process.

Open up your index.js file again and add the below code.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

varelectron=require('electron');

varapp=electron.app;

varBrowserWindow=electron.BrowserWindow;

varipc=electron.ipcMain;

app.on('ready',()=>{

varmainWindow=newBrowserWindow({

width:1280,

height:720

})

mainWindow.loadURL('file://'+__dirname+'/app/index.html');

varsecondWindow=newBrowserWindow({

width:800,

height:600,

show:false

})

secondWindow.loadURL('file://'+__dirname+'/app/second.html');

ipc.on('open-custom',()=>{

secondWindow.show();

})

});

ipc.on() listens for signals with the flag ‘open-custom’ and triggers the associated function accordingly; in this case it opens our custom window.

Now run the app and you will see the below output when you click on the opencustom submenu as shown below.

This is how you create menus and then open multiple windows in your angular2 – electron desktop app.

Notifications:

To create notifications you could just make use of the HTML5 notification API.

Create a new file called notification.ts in your app directory and add the below code.

1

2

3

declareclassNotification{

constructor(title:string,options?:Object)

}

Now open up app.ts again and modify the constructor as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

constructor(){

varmenu=remote.Menu.buildFromTemplate([{

label:'Raja',

submenu:[

{

label:'open',

click:function(){

dialog.showOpenDialog((cb)=>{

})

}

},

{

label:'opencustom',

click:function(){

ipcRenderer.send('open-custom');

let notification=newNotification('Customdialog',{

body:'This is a custom window created by us'

})

}

}

]

}])

remote.Menu.setApplicationMenu(menu);

}

Now this will create a notification with the ‘Customdialog’ and a body string as shown below.

Cool right, Like this you could create notifications to show up for your awesome desktop apps created with Angular 2 & Electron.