angular-cordova

This library allows you to access Cordova and Cordova Plugins using Angular and Typescript.

NPM: https://www.npmjs.com/package/angular-cordova

Key features

• All methods return Observables
• All method calls are automatically buffered and executed after deviceready
• Call plugins before they are loaded
• Load your app as fast as possible, no need to wait for deviceready

Installation

This package is distributed as source files and not as a library, because of this you need to add the files to your tsconfig.json file:

{
    ...
    "include": [
        "src/**/*",
        "./node_modules/angular-cordova/**/*"
    ],
}

API structure

All apis follow the official specification closely, as outlined here.

Example usage

Efficient way of getting the current position using the geolocation plugin.

import { GeolocationService } from 'angular-cordova/plugin/geolocation';

@Component({
  selector: 'demo',
  providers: [
    GeolocationService
  ]
})
export class DemoComponent {
  private sub: any;
  private position: any;
  
  constructor(
    private geolocationService: GeolocationService
  ) {}

  getCurrentPosition(): Observable<any> {
    if (!this.sub) {
      this.sub = this.geolocationService.watchPosition().map((res) => {
        // console.log("watchPosition update");
        this.position = {
          lat: res.coords.latitude,
          lng: res.coords.longitude
        };
      }).catch(() => {
        return Observable.of({});
      }).share();
      this.sub.subscribe(() => {});
    }

    if (this.position) {
      return Observable.of(this.position);
    } else {
      return this.sub.first().timeout(10000).catch(() => {
        return Observable.of({});
      });
    }
  }
}

Event listeners

Example listening to keyboard changes using the keyboard plugin.

import { KeyboardService } from 'angular-cordova/plugin/keyboard';

KeyboardService.keyboardDidShow.subscribe(() => {
    console.log("keyboardDidShow");
});

deviceready

If you still need to hook in to deviceready manually, you can do so:

import { Cordova } from 'angular-cordova';

Cordova.deviceready.subscribe(() => {
    console.log("we are ready!");
});