0

Is there a way to create a modeless dialog in an Angular/Electron app?

I'm looking at the samples below, and they're all modal:

https://material.angular.io/components/dialog/overview

I need to be able to open multiple windows at the same time and move them around. But I could not find any samples for that.

Thanks.

EDIT 1:

I've tried the following, but it's somehow leading me to the default page, index.html:

window.open('/app/shared/settings/user-preferences.html');

EDIT 2:

I've also tried the following, but it's not compiling.

const { BrowserWindow } = require('electron'); //does not compile!!?
let win = new BrowserWindow({ width: 800, height: 600 });
win.on('closed', () => {
  win = null;
});

win.loadURL(`file://${__dirname}/app/shared/settings/user-preferences.html`);

But that does not compile and gives me the error message:

ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\projects\...\MyApp\node_modules\electron'
ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'path' in 'C:\projects\...\MyApp\node_modules\electron'
Stout
  • 463
  • 8
  • 19
  • Hi, you mean in something like [window.open()](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) ? as in an acutal new window with dialog context... – Lucho Jan 25 '20 at 09:37
  • Thank you for the response. window.open() might do. I've tried it, but it somehow leads to Index.html. Am I using it correctly with this? window.open('/app/shared/settings/user-preferences.html'); – Stout Jan 27 '20 at 19:57
  • check post if it's what you looking for – Lucho Jan 28 '20 at 08:07

1 Answers1

1

You can use the window.open() API in order to open a new window instance of a window by providing an URL like so and use dialog context in it:

window.open('https://www.angular.io', 'nameOfWindow');

Here's a working example

EDIT1:

In consideration to electron API setups you also need to do following:

If you want to use Chrome's built-in window.open() implementation, set nativeWindowOpen to true in the webPreferences options object.

EDIT2:

In consideration to a local file you can do this: 

window.open(`file://${__dirname}/app/shared/settings/user-preferences.html`, 'nameOfWindow')
Lucho
  • 1,455
  • 1
  • 13
  • 25
  • Thank you for your response. This, unfortunately, is not what I was after. I am running an Electron app for Desktop, not a website. So I would need a way to open a local file, similar to this: window.open('/app/shared/settings/user-preferences.html'); – Stout Jan 28 '20 at 18:03
  • Thanks for the suggestion. It still doesn't work. It's opening a blank HTML screen with blank head and blank body. I also tried renaming the file to index.html, but it still wouldn't work. – Stout Jan 28 '20 at 18:40
  • have you logged the filepath of EDIT2 and comparing it with where it's really located as it might be path issue? – Lucho Jan 28 '20 at 18:50
  • Pretty sure I did. Although I'm not entirely sure how that relates to the {__direname} path. I've tried another file located in: C:\Projects\TestApp\src\components\share\share-file-dialog\share-file-dialog.component.html ... And the code I got so far is: window.open(`file://${__dirname}/src/components/share/share-file-dialog/share-file-dialog.component.html`, 'TestSettings123'); – Stout Jan 28 '20 at 19:13