How to make three way data binding in Angular & Firebase?

Question

I'm new in angular and firebase so it is not clear for me. I am now working on an e-commerce application specifically on the shopping cart page. I have a collection in the database called 'cart' which contains products as documents and i get its data stored in an array of objects in my cart.component.ts file. Then I loop this array in the cart.component.html file to display its data as the cart items. All of this works perfectly, but what I'm trying to do now is to link the value of 'qty' with its value in the database, So when the user changes it, it is changed in the database as well.

here is (cart.component.ts) file:

import { Component, OnInit } from '@angular/core';
import { Goods } from 'src/app/interfaces/goods';
import { CartService } from './../../services/cart.service';

@Component({
  selector: 'app-shopping-cart',
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.scss']
})
export class ShoppingCartComponent implements OnInit {

  cartGoods: Array<Goods>;

  constructor(private cartSer: CartService) {}

  ngOnInit() {
    this.cartSer.getCartGoods().subscribe(data => {
      this.cartGoods = data.map(el => {
        return {
          id: el.payload.doc.id,
          ...el.payload.doc.data()
        };
      });
    });
  }

}

here is (cart.component.html) file:

<ul class="cart">
  <li *ngFor="let good of cartGoods">
    <img [src]="good.img" [alt]="good.name">
    <h4 class="name"> {{ good.name | titlecase }} </h4>
    <strong class="price"> {{ good.price | currency }} </strong>
    <input class="qty" type="number" [(ngModel)]="good.qty">
  </li>
</ul>

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Word of caution:

Updating the database to stay in sync with quantity may not be a good idea because -- assuming you mean an HTTP request -- it would mean many more requests than is necessary and slow down your app. Consider a user pressing the up or down arrow on your number input to change quantity. Each time a change occurs, an HTTP call would be made. Is there no option for a Submit or Save button that the user can click to indicate that she is done setting quantity?

To do what you asked:

The simplest way to do this is probably to bind to the ngModelChange output of the ngModel directive:

<input class="qty" type="number" [(ngModel)]="good.qty" 
        (ngModelChange)="saveQty(good)">

This way you will execute saveQty and pass it the product whenever the model value changes. From there you can save good.qty wherever you want.

Additional Advice

What I've offered will work but it is not easily scalable or testable. I suggest for your greatest long term benefit that you learn how to use the ReactiveForms API to control every form behavior in your component class. For this specific use case, I would use FormArray to dynamically create as many inputs as is needed for the items in the cart.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 9, 2019 at 2:37

BeetleJuice

41.1k24 gold badges120 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Mabrouk Over a year ago

Thank you very much, I really appreciate your help.

riorudo Over a year ago

If you are using ReativeForms you can also add an debounceTime to your valueChnage detector in order to avoid to many backend calls.

Collectives™ on Stack Overflow

How to make three way data binding in Angular & Firebase?

1 Answer 1

Word of caution:

To do what you asked:

Additional Advice

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Word of caution:

To do what you asked:

Additional Advice

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related