True or False button in Angular

Question

I would like to create a button in Angular that when clicking on it generates a true or false value in Firebase, how could I do that? I have to create a button that records a true or false value in the database, so that my Arduino can read this field in the database and see if it is true or false to activate an engine, how can I be doing this in Angular with Firebase?

I’m already referencing the method

statusBotao():void{
  this.referenciaTabelaEsp.snapshotChanges().pipe(
    map(changes => changes.map(c => ({key: c.payload, ... c.payload.val()}))))
    .subscribe(data => {
      this.button = data;
      console.log(this.button);
      //this.banco.list("botoes").update(this.botaoeditar.key, {botao:this.valor.botao})
      

})

I will probably need a variable that will enter into the IF. For example

If (nomedocampo = "true"){
  MUDAR PARA FALSE
  titulodobotao = "O botão está pressionado"
}

Answer 1

My component

export class MyComponent  {

  itemPath = 'botoes/1';
  private itemDoc: AngularFirestoreDocument<Botao>;
  item$: Observable<Botao | undefined>;

  constructor(afs: AngularFirestore) {
    this.itemDoc = afs.doc(this.itemPath);
    this.item$ = this.itemDoc.valueChanges();
  }

  update() {
    firebase.firestore().runTransaction(async (transaction) => {
      const ref = this.itemDoc.ref;
      const doc = await transaction.get(ref);
      if (!doc.exists) {
        throw 'documento nao existe!';
      }
      const state = doc.data()!.state;
      transaction.update(ref, { state: !state });
    });
  }
}

export interface Botao {
  state: boolean;
}

Template

<ng-container *ngIf="item$ | async as btn">
    <button class="btn btn-primary" (click)="update()">{{ btn.state ? 'Ligado' : 'Desligado' }}</button>
</ng-container>

remember that the button will only appear if the'button/1 'document is created in the firestore.