CODEWITHSUNDEEP
ionic-frameworkionic2
Daniel Esteban Ladino Torres
Daniel Esteban Ladino Torres

Reputation: 203

How to update ion-toggle status real in time?

I have an ion toggle in my application that stores his status in a firebase Database, is there a way to change his status with the data loaded from firebase?

For example, if in the database the status is true, then when I load the view the toggle will be on. I've tried using checked:

<ion-toggle checked="status()" >

where status() returns a boolean.

But due to the async function of firebase, the view loads 1st before the value in status(). Can't find a solution to this problem so far, I'd apreciate any help.

Upvotes: 0

Views: 983

Answers (1)

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

Yes there's a way to do this, but using a function in your attribute is no good. When using a function in the DOM that returns a value you'll make that function executes every time there's a change in the DOM, so since this is a function that fetchs something on Firebase you'll make your user do an request to Firebase every time the DOM is updated.

A good way to do this is storing the Firebase result in a variable. you can do like this when you enter de page:

public myStatus: boolean;

// USING A LIFECYCLE HOOK
ionViewWillLoad(){
  firebase.database().ref(`Path/To/Your/Status`).once('value', snapshot => {
    this.myStatus = snapshot.val();
  });
}

And in your HTML

<ion-toggle [checked]="myStatus">
<!-- You need to bind your checked attribute to myStatus, using checked="{{myStatus}}" also works -->

If you need to always check if your status has changed you can also create and observable on firebase, so if your status change you can change your toggle:

ionViewWillLoad(){
  firebase.database().ref(`Path/To/Your/Status`).once('value', snapshot => {
    this.myStatus = snapshot.val();
  });
  firebase.database().ref(`Path/To/Your/Status`).on('child_changed', snapshot => {
    this.myStatus = snapshot.val();
  });

  // YOU'LL NEED BOTH SINCE THE FIRST LOADS THE STATUS FOR THE FIRST TIME AND THE SECCOND CREATES AN OBSERVABLE FOR WHEN THE STATUS CHANGE.
}

Hope this helps.

Upvotes: 1

Related Questions