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

Question

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'

Answer 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')