How to update ion-toggle status real in time? - ionic-framework

Question

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.

Answer 1

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.