Build Ionic 7 Flashlight/Torch App with Flashlight Plugin

Last Updated on March 4, 2024 by Digamber in Ionic

This is a quick tutorial. In this tutorial, we will learn how to build a Torch and Flashlight in Ionic 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 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

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Install Cordova Flashlight Plugin in Ionic

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

npm i cordova-plugin-flashlight --legacy-peer-deps

npm install @ionic-native/flashlight --legacy-peer-deps

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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// register flash light module
import { Flashlight } from '@ionic-native/flashlight/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    Flashlight,
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    },
  ],
  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.isTorch == true) {
      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

Finally, add target platforms for iOS, Android and Windows, create build and test the app.

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Use the following commands to build your Ionic app for various platforms:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Start the app in the device.

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l