Ytukyg

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!

Try using deviceProvider.getStatusString(). Without using this in constructor;

constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {

    this.stateString = deviceProvider.getStatusString();

}

You can directly set it in your ngModel :

[(ngModel)]="deviceProvider.check_string"

or

[(ngModel)]="deviceProvider.getStatusString()"

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