@ngstack/electron
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published

    @ngstack/electron

    Angular library that provides integration with Electron.

    Installing

    npm install @ngstack/electron

    Then import the ElectronModule into your application

    import { ElectronModule } from '@ngstack/electron';
     
    @NgModule({
      imports: [
        ...,
        ElectronModule
      ],
      declarations: [...],
      providers: [...],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    Features

    Electron Service

    • detects when application is running with Electron
    • provides access to IpcRenderer and cross-process communication
    • runs channel listeners within NgZone
    • does not affect the traditional Web applications

    Properties

    Name Type Description
    isDesktopApp boolean Detect whether service is running in a packaged desktop app
    isWebApp boolean Detect whether service is running in a traditional browser

    Listening to messages

    Inject the ElectronService instance into your component and use ElectronService.on method:

    @Component({...})
    export class AppComponent implements OnInit {
     
      constructor(private router: Router,
                  private electron: ElectronService) {
      }
     
      ngOnInit() {
        this.electron.on('app:navigateRoute', (event: any, ...args: string[]) => {
          this.router.navigate([...args]);
        });
      }
     
    }

    Example above setups an app:navigateRoute channel listener, and uses Router to navigate to the requested route automatically.

    Now, in the Electron application shell you can request navigation like in the following example:

    BrowserWindow.getFocusedWindow().webContents.send(
      'app:navigateRoute',
      '/about'
    );

    Note that the ElectronService.on method has no effect in the traditional Web apps, but you can still use it to have source code compatibility with the packaged scenarios.

    Sending messages

    Inject the ElectronService instance into your component and use ElectronService.send method:

    @Component({...})
    export class AppComponent {
     
      constructor(private electron: ElectronService) {}
     
      onButtonClicked(event: any, parameter: string) {
        this.electron.send('app:doSomething', parameter);
      }
     
    }

    Now, in the Electron application shell you can request navigation like in the following example:

    ipcMain.on('app:doSomething', (event, parameter) => {
      // your custom code with optional access to parameter passed from the web app
    });

    Note that the ElectronService.send method has no effect in the traditional Web apps, but you can still use it to have source code compatibility with the packaged scenarios.

    Install

    npm i @ngstack/electron

    DownloadsWeekly Downloads

    6

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    95 kB

    Total Files

    24

    Last publish

    Collaborators

    • denysvuika