angular-cordova

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

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!");
});