Ionic + Firebase for Toggle

@bornii wrote:

Hey Guys, hopefully someone could help me.

I would like to safe a boolean in Firebase Database. So far no problem. I can change the status of this boolean out of my App but now comes the problem. I would like to check the status of this boolean and make it as the standard of my toggle and if the boolean changes his value from true to false or opposite. I would like to live update this in my app. Do you think that this is possible and do you know how to do that?

Here comes my code:

fire-base.ts:

import { Component, NgZone } from '@angular/core';
import { IonicPage, NavController, ActionSheetController, AlertController } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import { Observable } from "rxjs";

@IonicPage()
@Component({
  selector: 'page-fire-base',
  templateUrl: 'fire-base.html',
})
export class FireBasePage {
  
    relaisList:AngularFireList<any>;
    Relais: Observable<any[]>;

    public relais_1: boolean = true;

    constructor(public navCtrl: NavController, public afDB: AngularFireDatabase, public alertCtrl: AlertController, 
      public actionSheetCtrl: ActionSheetController) {

        this.relaisList = this.afDB.list('/Relais')
        this.Relais = this.relaisList.valueChanges();
    }

    
   changeRelais_1() {
      if (this.relais_1) {
            this.relaisList.update('relais_1', {
            status: true})
        }else {
            this.relaisList.update('relais_1', {
            status: false})
        }  
    }
  ionViewDidLoad() {
  }
}

fire-base.html

<ion-header>
	<ion-navbar>
		<button ion-button menuToggle>
			<ion-icon name="menu"></ion-icon>
		</button>
              <ion-title>Firebase</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding>
  <p>Test</p>
  <ion-item>
    <ion-label>Relais 1</ion-label>
    <ion-toggle [(ngModel)]="relais_1" (ionChange)="changeRelais_1()"></ion-toggle>
  </ion-item>
</ion-content>

Firebase

I know how to make a ion-list but the problem is, that i need the single status: true in my .ts file and i can’t find a way to get this working. Thank you for every help!!

Posts: 1

Participants: 1

Read full topic