I want to click a button to open folder dialog in my component. Here is what I am trying to do:
HTML:
<div>
<input class="u-full-width" placeholder="Folder" type="text" [(ngModel)]="folder">
<button id="browse" class="button-primary" (click)="browse()">Browse</button>
<input id="fileInput" type="file" style="display: none" />
</div>
component.ts
// var remote = require('remote');
// var dialog = remote.require('dialog');
folder: string;
browse() {
dialog.showOpenDialog({title: 'Select a folder', properties: ['openDirectory']}, (folderPath) => {
if (folderPath === undefined){
console.log("You didn't select a folder");
return;
}
this.folder = folderPath;
});
}
So, how do I import remote and dialog?
Just import the "remote" module using es6 import,and then your ts file will be like
import { remote } from 'electron';
folder: string;
browse() {
remote.dialog.showOpenDialog({title: 'Select a folder', properties: ['openDirectory']}, (folderPath) => {
if (folderPath === undefined){
console.log("You didn't select a folder");
return;
}
this.folder = folderPath;
});
}
You can try it with the ngx-electron library
import {ElectronService} from 'ngx-electron'
export class DialogHelper {
private static alert = new ElectronService().remote.dialog;
}
You're close. According to the documentation (https://github.com/electron/electron/blob/master/docs/api/dialog.md) to use it in the renderer you need to do const {dialog} = require('electron').remote so your first remote variable isn't necessary.