Ionic 3 : pass provider's variables to ion-input - ionic-framework

Question

I have this simple provider:
import { Injectable } from "#angular/core";
#Injectable()
export class DevicesService {
public check_string : any;
constructor(){
this.check_string = "Provider enabled";
}
getStatusString() { return this.check_string; }
}
and I am trying to pass that check_string variable to a ion-input in my home.ts:
<strong><ion-input round id="stringstatus" type="text" [(ngModel)]="stringstatus"></ion-input></strong>
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 stateString : string;
constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
this.stateString = this.deviceProvider.check_string;
//this.stateString = this.deviceProvider.getStatusString();
}
}
I tried both two ways, direct pass variable and getting return function but once I run app it shows blank page.. what I could have missed?
Thanks a lot to all
Cheers!

Answer 1

Try using deviceProvider.getStatusString(). Without using this in constructor;
constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
this.stateString = deviceProvider.getStatusString();
}

Answer 2

You can directly set it in your ngModel :
[(ngModel)]="deviceProvider.check_string"
or
[(ngModel)]="deviceProvider.getStatusString()"

Answer 3

Hello Rameez and saperlipopette,
I tried as both of you obtaining this:
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";
}
}
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,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {
}
home.html
<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>
home.ts
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.check_string;
this.ble_state = deviceProvider.getStatusString();
}
}
Before I put also directly in [(ngModel)] but it goes for blank page..... I think it's related something about passing variables maybe because if I comment that:
this.ble_state = deviceProvider.getStatusString();
the app appears working...
Maybe it's related about ionic and cordova installation platforms or dependencies even if it didn't reported any errors during compilation?
Thanks