Create Ionic 6 Angular Flashlight App with Ionic Native/Cordova

Ionic is a popular and awesome open-source platform for building robust applications for various devices; you can use its native paradigm to build quick features in conjunction with the network, location not only but also the camera module.

This guide will help you create a torch or flashlight application in Ionic Angular using ionic native and Cordova flashlight plugins.

You will be given step-by-step instructions to build an Ionic torch or flashlight app.

We will begin installing the ionic app, installing the Cordova and native plugins, then creating a simple button with an on and off switch toggle to turn on and off torch or flashlight, respectively.

Install Ionic App

If you have node and npm install then go ahead and install the Ionic CLI tool:

npm install -g @ionic/cli

Now, you can use below command to create a new Ionic Angular app:

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

Head over to app directory:

cd ionic-demo-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install Cordova and Native Plugins

In this step, go to terminal window and start typing recommended commands to recklessly install the Cordova flashlight and Ionic native plugins.

ionic cordova plugin add cordova-plugin-flashlight

npm install @ionic-native/flashlight

Register Flashlight in Main Module

In the subsequent step, you require to import the Flashlight module from the ‘@ionic-native/flashlight/ngx’ package, additionally register the Flashlight in the providers’ array.

Open app.module.ts on top of that update the suggested code:

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';

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


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

export class AppModule {}

Create Torch Switch Toggle Button

In this step, we create the toggle button to switch on and off the flashlight in the native, ionic application, consequently open and update the home.page.html template file.

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

<ion-content [fullscreen]="true">
  <ion-content [fullscreen]="true">
      <ion-button expand="block" color="primary" (click)="turnOnTorch()">
        On
      </ion-button>
      <ion-button expand="block" color="danger" (click)="turnOffTorch()">
        Off
      </ion-button>
  </ion-content>
</ion-content>

Update Home TypeScript File

We have created on and off button to switch on the torch in our app. Now, furthermore, you need to write programme login for torch app, use Flashlight module to access the switchOn and switchOff methods.

Finally, update home.page.ts page 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 {

  isFlashlight = false;
  
  constructor(private torchLight: Flashlight) {}

  turnOnTorch(){
    if(this.torchLight.available()){
      this.isFlashlight = false;
      this.torchLight.switchOn();
    }else{
      alert("Flashlight doesn't exist");
    }
  }

  turnOffTorch(){
    this.isFlashlight = true;
    this.torchLight.switchOff();
  }

}

Test Flashlight App

Ultimately, you can create a build and run the app on the preferred device:

Run following command to add the platform:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Plus, once again run one of the commands to create the ionic build.

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Start the app on real device or emulator; even you can test the app by connecting to the USB:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

integrate flashlight in Ionic

Conclusion

The Ionic flashlight example tutorial is completed, i hope this guide will be helpful to you.