Ionic + Firebase for Toggle

Ionic Framework ionic-v3
1

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
37

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!!

2

Hi,

Please check: link

1 Like
3

Thank you @Alberthoekstra,

i will try it later and replay if i it works for me or not. :slight_smile:

1 Like
4

Hey @Alberthoekstra i tried it but there are so many parameters missing that i don’t know how to get it working :frowning:

Hope it is clear what i want. 1. I would like to have access to just the true or false to work with it and the second think i’m looking for is an auto refresh on change for the toggle.

I’m really a newbie with ionic and firebase so hopefully someone could help me there

UPDATE with the change to npm install angularfire2@4.0.0-rc0 --save

and to this code:

this.afDB.list('/Relais/relais_1').subscribe(_data => {
          this.arrData = _data;
          this.test = this.arrData[0];
        console.log(this.test);
        })

instead of this

this.relaisDoc = this.afDB.doc('/Relais/relais_1')
        this.relais_1 = this.relaisDoc.valueChanges();

I receive this …

{$value: true, $key: "status"}

but how can i “slice” or something else the true out of that?

5

Okay, so I’ll try to explain what to do.

.ts file

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

@IonicPage()
@Component({
  selector: 'page-fire-base',
  templateUrl: 'fire-base.html',
})
export class FireBasePage {

    relaisDoc :AngularFireDocument<any>;
    relais_1: Observable<boolean>;

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

        this.relaisDoc = this.afDB.doc('/Relais/relais_1')
        this.relais_1 = this.relaisDoc.valueChanges();
    }


   async changeRelais_1(isChecked) {
       try
       {
        await this.relaisDoc.update({status: isChecked});
       }
       catch(error)
       {
           // catch error
       }

    }
  ionViewDidLoad() {
  }
}

.html file

<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 | async" (ngModelChange)="changeRelais_1($event)"></ion-toggle>
  </ion-item>
</ion-content>

I couln’t test it, but this might work already or you have to make some small changes.

Good luck!

1 Like
6

Check out this site…

It’s all about using Angular and firbase together with reatime updates.

The basic premise of what you want to do is make your switch monitor a firebase document as an observable using the valueChanges pipe. This will open a realtime comnection to the database and the boolean value will always reflect what’s in the db. Then to update it make toggling the switch change the value in the db. The reset will be automatic.

1 Like
7

Yeah he’s right.
If you don’t know the basics you wont be able to create anything…

8

Thanks again @Alberthoekstra.

… it really looks like the end of my problem is just reachable.

I could solve some little other problems by myself but i don’t know how to handle this one …

36

the hopefully last error ist the .doc

And also thank you to @Dan203 i will check it out :slight_smile:

Edit …

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


@IonicPage()
@Component({
  selector: 'page-fire-base',
  templateUrl: 'fire-base.html',
})
export class FireBasePage {

    relaisDoc: AngularFirestoreDocument<any>;
    relais_1: Observable<boolean>;


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

        this.relaisDoc = this.afDB.doc('/Relais/relais_1');
        this.relais_1 = this.relaisDoc.valueChanges();
    }


   async changeRelais_1(isChecked) {
       try
       {
        await this.relaisDoc.update({status: isChecked});
       }
       catch(error)
       {
           // catch error
       }

    }
  ionViewDidLoad() {
  }
}
9

Thats not right.
It should be:

public afDB: AngularFirestore

Like is documented here link

1 Like
10

I found a solution thank you @Alberthoekstra for your time and patience :slight_smile: