Angular Example

Using Nativify with Angular Service Pattern.

1. Bridge Service (bridge.service.ts)

import { Injectable } from '@angular/core';
import WebBridge from './web-bridge'; 

@Injectable({
  providedIn: 'root'
})
export class BridgeService {
  private bridge: WebBridge;

  constructor() {
    this.bridge = new WebBridge({ debug: true });
  }

  // --- Core ---
  isAvailable() { return this.bridge.isAvailable(); }

  // --- Session ---
  login(userId: string, token: string) {
    return this.bridge.login(userId, token);
  }

  // --- Location ---
  getLocation() { return this.bridge.getLocation(); }
  
  watchLocation(callback: (loc: any) => void) {
    return this.bridge.watchLocation(callback);
  }

  // --- Media ---
  takePhoto() { return this.bridge.takePhoto(); }
  pickImage() { return this.bridge.pickImage(); }

  // --- Device & UI ---
  getDeviceInfo() { return this.bridge.getDeviceInfo(); }
  showToast(msg: string) { return this.bridge.showToast(msg); }
  vibrate() { return this.bridge.vibrate(); }
}
    

2. Component (app.component.ts)

import { Component } from '@angular/core';
import { BridgeService } from './bridge.service';

@Component({
  selector: 'app-root',
  template: `
    
{{ result | json }}
    
    Login
    Get Location
    Take Photo
    Show Toast
  `
})
export class AppComponent {
  result: any;

  constructor(private bridge: BridgeService) {}

  async login() {
    try {
      this.result = await this.bridge.login('user_ang', 'token');
    } catch (e) { this.result = e; }
  }

  async getLocation() {
    this.result = await this.bridge.getLocation();
  }

  async takePhoto() {
    const res = await this.bridge.takePhoto();
    this.result = 'Photo captured!';
  }

  showToast() {
    this.bridge.showToast('Hello from Angular');
  }
}