Hello everyone,
I am trying to make a simple app to check bluetooth and device… I started making a tabs main app then a injectable provider where I could manage bluetooth connection and devices through all tabs.
Starting to check if my own provider works I played just showing a simple variable on a ion-input field used as a label but when I compile and run the app on my mobile phone it shows total blank page if I assign provider’s variable to the ion-input when it shouldn’t. Here my simple code:
devicefactory.ts
import { Injectable } from "@angular/core";
//import { BluetoothLE } from '@ionic-native/bluetooth-le';
@Injectable()
export class DevicesService {
public ble_status : boolean;
public check_string : any;
// public BLE : BluetoothLE
constructor(){
this.ble_status = false;
//this.BLE.initialize();
//this.BLE.isEnabled().then(result => { this.ble_status = result.isEnabled; });
this.check_string = "Provider enabled";
}
getStatus() { return this.ble_status; }
getStatusString() { return this.check_string; }
enableBLE() {
//if (this.ble_status) this.BLE.enable(); else this.BLE.disable();
if (this.ble_status) this.check_string = "Provider enabled"; else this.check_string = "Provider disabled";
}
}
so I initialized my own provider in app.module.ts:
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HoergerateApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SettingsPage } from '../pages/settings/settings';
import { DevicesService } from '../providers/devicefactory/devicefactory';
@NgModule({
declarations: [
HoergerateApp,
AboutPage,
SettingsPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(HoergerateApp)
],
bootstrap: [IonicApp],
entryComponents: [
HoergerateApp,
AboutPage,
SettingsPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
DevicesService, // my own provider
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {
}
then in my home.html I have settled that ion-input:
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<p>
Check bluetooth status:<br>
<strong><ion-input round id="ble_state" type="text" [(ngModel)]="ble_state"></ion-input></strong>
</p>
</ion-content>
and in home.ts I assign that provider’s variable to the ion-input:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public ble_state : string;
constructor(public navCtrl: NavController, public deviceProvider : DevicesService) {
//this.ble_state = ( this.deviceService.ble_status ? "Bluetooth is enabled" : "BLuetooth is disabled" );
this.ble_state = deviceProvider.getStatusString();
//this.ble_state = deviceProvider.check_string;
}
}
If I comment that line of code about assignment variable, the app works and shows the content of home.html like it’s something related to that assignment way.
I tried also to assign directly to [(ngModel)] as like as:
[(ngModel)]="deviceProvider.check_string"
and during compilation no errors displayed so I am here asking you if I missed something or it’s maybe related to some dependencies that works with assignments?
Supposing it’s related about dependencies since it’s just a simple example I am making, here the content of my package.json:
{
"name": "sampleproject",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/bluetooth-le": "^4.16.0",
"@ionic-native/core": "~4.15.0",
"@ionic-native/splash-screen": "~4.15.0",
"@ionic-native/status-bar": "~4.15.0",
"@ionic/storage": "2.2.0",
"cordova-android": "7.1.1",
"cordova-ios": "4.5.5",
"cordova-plugin-bluetoothle": "4.4.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.2.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionic-plugin-bluetoothle": "^1.0.0",
"ionicons": "3.0.0",
"list": "2.0.16",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.0",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-bluetoothle": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android",
"ios"
]
}
}
Thanks to all!
Cheers!
Luigi
Thanks for now, rapropos