Getting variable from provider makes blank page

@npuleio wrote:

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

Posts: 1

Participants: 1

Read full topic