challenging situation with IONIC 2

Building an app using Ionic 2 and trying to incorporate the ble-plugin. Following the installation steps:

$ cordova plugin add cordova-plugin-ble-central

In my page's TS, I included the following code:

import {Page, Alert, NavController} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})

export class HelloIonicPage {

        constructor(public nav: NavController) { }
        bleScan() {
            ble.scan([], 5, function(device) {
                console.log(JSON.stringify(device));
            }, failure);
        }
}

Encountering errors as ble is not being recognized. Wondering if a dependency needs to be injected or any other steps to make this work?

typescriptionic-frameworkbluetooth-lowenergyionic2

Answer №1

To incorporate the necessary import, simply follow these steps:

import {BLE} from 'ionic-native';

Once this is done, proceed to use it in the following manner: 

 BLE.scan([], 5).subscribe(device => {
      console.log(JSON.stringify(device));
    }, error => {
      console.log(error);
    });

Answer №2

To begin, include this at the top of your TypeScript page

import {BLE} from 'ionic-native'

Simply utilize it in your TypeScript page

this.platform.ready().then(() => {

    BLE.enable();

    BLE.startScan([]).subscribe(device => {

        console.log(JSON.stringify(device));              
    },
        err => {
            //this.message = "Error";
        });
});

Answer №3

Prior to utilizing ble, ensure that you import it beforehand.

Answer №4

Would this be helpful? I'm currently working on an Ionic 2 project that will require the use of the BLE API, though I haven't begun implementing it yet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rearrange the layout by dragging and dropping images to switch their places

I've been working on implementing a photo uploader that requires the order of photos to be maintained. In order to achieve this, I have attempted to incorporate a drag and drop feature to swap their positions. However, I am encountering an issue where ...

javascriptangulartypescriptdrag-and-dropangular-cdk

Adapting the return type dynamically according to the input given

I have a set of 4 different classes: class AddCommand { // TODO } class AddCommandOutput { // TODO } class RemoveCommand { // TODO } class RemoveCommandOutput { // TODO } I am currently working on creating a function that can take either Ad ...

typescript

Implementing Limited Results in Redis FT.SEARCH with TypeScript

Snippet of code: client.ft.SEARCH('license-index-json',"@\\$\\" + ".reservedForApplicationName:GSTest",{ LIMIT: { from: 0, to: 1 } }) Error message: An error occurred when trying t ...

typescriptredis

Learning to utilize the i18n library with React Vite

The developer console is showing the following message: i18next::translator: missingKey en translation suche suche Here is the file structure of my project: vite.config.ts i18n.js test/ src/ components/InputSearch.tsx routes/ public/ de/translation. ...

typescriptvitei18nextreact-i18nextreact-tsx

Invoke a component's function in a different component

Upon clicking the button, I am trying to execute the 'exportHistoryToCSV' method within this component, which in turn calls a method from another component. However, I am encountering an error. @UntilDestroy() @Component({ selector: 'd ...

angulartypescriptngrx

Hold off until the operation finishes executing and then deliver Angular 6

Is there a way to delay the subscribe function until my logic is complete and the transform method has updated the keys object? transform(value: any, args:string) : any { let keys = []; this.http.get('src/app/enum-data/enum.json').subsc ...

angulartypescriptobservablesubscribe

Issue with throttle function not properly handling the class method call

I am facing a challenge with my code where I am trying to throttle text input, but it seems that calling another method is causing the throttling to not work as expected. import { throttle } from 'lodash'; ... <input type="t ...

reactjstypescriptlodashthrottling

Instantiate a fresh object using the new keyword followed by the Class constructor, and if desired,

I'm looking for a class that I can easily create new instances from and optionally assign properties using the constructor. For instance: class Person { name: string; age: number; constructor(props: {name?: string, age?: number}) { this.nam ...

typescriptclassconstructor

Only map property type when the type is a union type

My goal is to create a mapping between the keys of an object type and another object, following these rules: Each key should be from the original type If the value's type is a union type, it should have { enum: Array } If the value's type is not ...

typescript

Is the "position: sticky" feature functioning correctly, or is there a slight vibrating or dancing effect when users scroll through the Ionic app? How can we eliminate this issue specifically on iOS

Looking for suggestions on this problem - the position sticky is functioning correctly, but there seems to be a slight vibration or dancing effect when users scroll in the Ionic app. Any ideas on how to eliminate this issue specifically on iOS devices? & ...

htmlcssuser-interfaceionic-frameworksass

Building a hybrid application in Angular using UpgradeModule to manage controllers

I am currently in the process of upgrading a large AngularJS application using UpgradeModule to enable running AngularJS and Angular 6 simultaneously without going through the preparation phase, which typically involves following the AngularJS style guide. ...

javascriptangularjsangulartypescripthybrid

How can I ensure a function only runs after all imports have been successfully loaded in Vue 3?

Encountering an issue with importing a large quantitative variable in Vue 3. Upon running onMounted, it seems that the import process is not yet complete, resulting in an error indicating that the variable tesvar is "uninitialized". The code snippet prov ...

javascripttypescriptvue.jsimportvuejs3

Guide: Implementing material-ui theme with redux in gatsby

I'm currently utilizing the material-ui theme in conjunction with redux-toolkit within a gatsby project. This is my theme.ts file: import { createMuiTheme } from "@material-ui/core"; import { useSelector } from "react-redux"; import { State } from ". ...

javascriptreactjstypescriptreduxmaterial-ui

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...

javascriptangularhtmltypescriptangular-material

The changes made to the path property in tsconfig.json are not being registered

A troublesome block of imports has surfaced, as shown in this image: https://i.sstatic.net/lRwK5.png Below is my current configuration in tsconfig.json : { "compilerOptions": { "target": "es5" /* Specify ECMAScript targ ...

reactjstypescriptreact-nativeexpo

Utilize the power of PIXI.js to effortlessly convert your canvas into a high-quality image without encountering

I'm currently working on exporting the entire canvas as a PNG using PIXI.js within a React app that incorporates react-pixi. My version is 6.5 and I've been trying out the following code: // MyComponent.tsx <button onClick={exportImage} /> ...

javascriptreactjstypescripthtml5-canvaspixi.js

Why does the inferred type not get resolved in the else block of the ternary operator when using infer on a generic type?

Consider a scenario where we have a type with a generic argument T: type Wrap<T> = { data: T }; If we define another type to extract the generic T: type Unwrap<W> = W extends Wrap<infer T> ? T : T; Why does using T in the else clause ...

typescripttypescript-generics

What is the best approach to implementing React Hooks in Typescript when using Context?

I have implemented the following code snippet in my new React Native project to enable Dark Mode using TailwindCSS: import React, { createContext, useState, useContext } from 'react'; import { Appearance } from 'react-native'; import { ...

reactjstypescript

What could be causing the 'controls' property to be undefined when using form: FormGroup in an Angular 11 component?

Just diving into Angular 11 and getting to grips with TypeScript.. I'm trying to access the 'controls' property in a specifically defined 'FormGroup' variable. But for some reason, it keeps saying that the property is undefined... ...

angulartypescriptangular11

Transform the date format from Google Forms to TypeScript

I am currently facing an issue with a Google Form connected to a Google Spreadsheet. The date format in the spreadsheet appears as follows when a response is received: 20/02/2023 18:58:59 I am seeking guidance on how to convert this date format using Type ...

typescriptdate