Ionic/Angular Flashlight/Torch App with Cordova Flashlight Plugin

This is going to be a brief tutorial. In this guide, we will learn how to create an Ionic/Angular application for Flashlight by making use of the Cordova Flashlight plugin.

We are going to develop a simple application for an ionic torch, which will allow the user to turn the flashlight on or off by clicking a single button.

Ionic CLI should be installed.

On your local development machine, you need to run the following NPM command to install the most recent version of the Ionic CLI:

npm install -g @ionic/cli

Bash

Check the Ionic CLI version:

ionic --version

Bash

Create an "blank" application using Ionic/Angular 

In order to get started with the first step, we need to create an entirely new application for the ionic angular torch.

To manifest your Ionic project, run the following line in your terminal or cmd.

ionic start projectName blank --type=angular

Bash

Move to the project root:

cd projectName

Bash

Cordova Flashlight Plugin Installation CMD in Ionic/Angular

Installing the ionic native flashlight module and the Cordova flashlight plugin are the next steps to take.

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

Bash

Import Flashlight Module in AppModule

The next step is to make sure that the Flashlight package has been imported into the AppModule class, and then to register the plugin in the providers array.

Go to src/app folder in your application and 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 {}

TypeScript

Create a Usage for the Flashlight in Ionic/Angular

We will be use Ionic's default home component in order to create the flashlight function and usage; to do so, add the following code to the 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(public flashlight: Flashlight) {}

  onFlashlight(){
    if(this.flashlight.available()){
      this.isTorch = false;
      this.flashlight.switchOn();
    }else{
      alert('Device don't support Flashlight');
    }
  }

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

}

TypeScript

Insert the code that is provided below into the home.page.html file.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic/Angular 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>

Markup

Final Step - Build Ionic/Angular

Since we are developing a Cordova application, it will be most beneficial to test the application in an emulator.

ionic cordova build android
ionic cordova emulate android

Bash

For ios you can use following command:

ionic cordova run ios

Conclusion

So, that's it for this Flashlight article in Ionic/Angular application. Stay tunned by subscribing us on YouTube and for more help.

Also Check

Ionic 4|5 Cordova InAppBrowser

Ionic 5|4 Cordova Admob Plugin With Example

Ionic 4|5 Cordova GeoLocation Plugin With Example 

Ionic 5|4 Cordova Barcode Scanner Plugin With Example

Ionic 4|5 Cordova Camera Plugin With Example

Ionic 5|4 Http Calls With Demo API

Ionic 4|5 Upload Image and display

Ionic 5|4 Manage Phone Contacts, Call& display