Create flashlight application in ionic 2

flashlight application ionic2

Ionic Free & Open Source and Fully Cross-Platform Framework.ionic provide the native plugin for access mobile feature like camera, network, location, file etc.

 

Today we are creating the flash light application using ionic 2 frameworks .ionic 2 provide to enhance the capabilities of your app by utilizing the features of your phone. Eg. Camera, Flashlight, Geolocation etc.

See demo: https://www.youtube.com/watch?v=lWsbk0VbmVE

To start with, create a project run this command:

ionic start flashlight2 blank

then move into the newly created directory:

cd flashlight2

Now we need to add the plugin and install ionic-native. This could be done by giving the 2 commands below.

ionic cordova plugin add cordova-plugin-flashlight
npm install --save @ionic-native/flashligh

Open up home.html in Pages -> home directory and add the below code between the ion-content tags.

<h2>Flashlight is {{isOn ? 'On': 'Off'}}</h2><button ion-button block primary (click)="toggleFlash()">{{isOn ? 'On': 'Off'}} flash</button>

Open home.ts and add the code: 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Flashlight } from '@ionic-native/flashlight';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  isOn: boolean = false;
  constructor(public navCtrl: NavController, public flashlight: Flashlight) {
  }
  async isAvailable():Promise{
    try{
      return await this.flashlight.available();
    }catch(e){
      console.log(e);
    }
  }
  async toggleFlash():Promise{
    try{
      let available = await this.isAvailable();
      if(available){
        await this.flashlight.toggle();
        this.isOn = !this.isOn;
      }else{
        alert("Flash not available...");
      }
    }catch(e){
      console.log(e);
    }
  }
}

then open app.module.ts and add the code: 

import { Flashlight } from '@ionic-native/flashlight';
providers: [
    StatusBar,
    SplashScreen,
    Flashlight,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

Flashlight application code is done you add platform in your application code platform add command: 

ionic cordova platform add android/ios/windows

Build and Run command

ionic cordova build android/ios/windows
ionic cordova run android/ios/windows

Github Link: https://github.com/Sudarshan101/flashlight2

thank you 

About the author
Code solution

info@codesolution.co.in

Discussion
  • 0 comments

Add comment To Login
Add comment