Build Ionic 5 Flashlight/Torch App with Cordova Flashlight Plugin

Last updated on by Digamber

This is a quick tutorial. In this tutorial, we will learn how to build a Torch and Flashlight Ionic 5 application using Cordova Flashlight plugin.

We will create a basic Ionic torch application whose flashlight can be turned on or off by clicking on the simple button.

Install Ionic CLI

You need to install the latest Ionic CLI version on your local development machine using NPM command:

npm install -g @ionic/cli

Check the Ionic CLI version:

ionic --version

Create Ionic 5 Application

We have to begin our first step by creating a fresh brand new Ionic Angular Torch application.

Execute the following command from the terminal to manifest Ionic project.

ionic start ionic-angular-torch-app blank --type=angular

Move to the project root:

cd ionic-angular-torch-app=angular

Install Cordova Flashlight Plugin in Ionic

Next, we need to install the Cordova flashlight plugin, also install the ionic native flashlight module.

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

Import Flashlight Module in AppModule

Next, we have to first import the Flashlight package in AppModule class, then also register the plugin in providers array:

Add the code in app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { Flashlight } from '@ionic-native/flashlight/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Flashlight
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

Create Torch Component

For creating flashlight component we are using Ionic’s default home component, add the following code in home.page.ts file.

import { Component } from '@angular/core';
import { Flashlight } from '@ionic-native/flashlight/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  isTorch = false;
  
  constructor(private flashlight: Flashlight) {}

  onFlashlight(){
    if(this.flashlight.available()){
      this.isTorch = false;
      this.flashlight.switchOn();
    }else{
      alert("Flashlight Not Available");
    }
  }

  offFlashlight(){
    this.isTorch = true;
    this.flashlight.switchOff();
  }

}

Place the given below code in home.page.html file.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Torch/Flashlight Application
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-button expand="block" color="success" (click)="onFlashlight()">
      Turn on
    </ion-button>
    <ion-button expand="block" color="danger" (click)="offFlashlight()">
      Turn off
    </ion-button>
</ion-content>

Test Application

We are creating a Cordova app so its better to test the app in the emulator.

ionic cordova build ios
ionic cordova emulate ios

For android you can use following command:

ionic cordova run android