Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ThorstenHans/ngx-electron
A simple Angular wrapper for electron's Renderer API
https://github.com/ThorstenHans/ngx-electron
angular electron hacktoberfest
Last synced: 7 days ago
JSON representation
A simple Angular wrapper for electron's Renderer API
- Host: GitHub
- URL: https://github.com/ThorstenHans/ngx-electron
- Owner: ThorstenHans
- License: mit
- Archived: true
- Created: 2017-02-24T11:50:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:17:51.000Z (almost 2 years ago)
- Last Synced: 2024-05-19T03:19:37.941Z (6 months ago)
- Topics: angular, electron, hacktoberfest
- Language: TypeScript
- Homepage:
- Size: 2.44 MB
- Stars: 428
- Watchers: 17
- Forks: 88
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-electron
[![Build Status](https://travis-ci.org/ThorstenHans/ngx-electron.svg?branch=master)](https://travis-ci.org/ThorstenHans/ngx-electron)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)`ngx-electron` is a small Module for [Angular](http://angular.io) which makes calling [Electron](https://electronjs.org) APIs from the `Renderer Process` easier. By adding it to your Angular project, you'll get IntelliSense and a simple Angular service which acts as facade for Electron APIs.
`ngx-electron` is licensed under [MIT](https://opensource.org/licenses/MIT).
## Introduction
Checkout the introduction post on my [blog](https://thorsten-hans.com/integrating-angular-and-electron-using-ngx-electron) for more details.
## Support me
[![Become a Patron!](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=16380186)
## Installation
`ngx-electron` can be installed easily using either `yarn` or `npm` commands in the scope of an angular project.
```bash
yarn add ngx-electron --save
# or
npm install ngx-electron --save
```The `NgxElectronModule` needs to be import in your `root` Angular module (eg `AppModule`).
``` typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';import { NgxElectronModule } from 'ngx-electron';
@NgModule({
declarations: [],
imports: [
BrowserModule,
NgxElectronModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
```Once the module has been imported, you can easily use dependency injection to get an instance of `ElectronService`.
``` typescript
import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';@Component({
selector: 'my-app',
templateUrl: 'app.html'
})
export class AppComponent {constructor(private _electronService: ElectronService) { }
public playPingPong() {
if(this._electronService.isElectronApp) {
let pong: string = this._electronService.ipcRenderer.sendSync('ping');
console.log(pong);
}
}
}
```## ElectronService
The `ElectronService` is exposing all API's accessible from within Electron's renderer process. **If your app is not running inside electron, all getters will return NULL instead**.
### Properties
* `desktopCapturer: Electron.DesktopCapturer` - Electron's desktop capturing API
* `ipcRenderer: Electron.IpcRenderer` - Electron IpcRenderer
* `remote: Electron.Remote` - Electron Remote capabilities
* `webFrame: Electron.WebFrame` - Electron WebFrame
* `clipboard: Electron.Clipboard` - Clipboard API
* `crashReporter: Electron.CrashReporter` - Electron's CrashReporter
* `process: NodeJS.Process` - Electron's Process Object
* `screen: Electron.Screen` - Electron's Screen API
* `shell: Electron.Shell` - Electron's Shell API
* `nativeImage: Electron.NativeImage` - Electron's NativeImage API
* `isElectronApp: boolean` - Indicates if app is being executed inside of electron or not
* `isMacOS: boolean` - Indicates if app is running in electron and on `macOS`
* `isWindows: boolean` - Indicates if app is running in electron and on `Windows`
* `isLinux: boolean` - Indicates if app is running in electron and on `Linux`
* `isX86: boolean` - Indicates if app is running in electron and on a `x86` architecture
* `isX64: boolean` - Indicates if app is running in electron and on a `x64` architecture
* `isArm: boolean` - Indiciates it app is running in electron adn on a `ARM` architecture