Angular 8 - How can I update Firebase database

Question

I'm trying to update the vehicle list but I don't know how to update it since I following a Udemy tutorial of Mosh, which is an outdated version of Angular.

Service Code (TS):

import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Injectable } from '@angular/core';
import { Cars } from './component/vehicle-table/vehicle.services';

@Injectable({
  providedIn: 'root'
})

export class CarIdService {

  private dbPath = '/car';

  CarID: AngularFireList<Cars> = null;

  constructor(private db: AngularFireDatabase) {
    this.CarID = db.list(this.dbPath);
  }

  //Create
  create(carID) {
    this.db.list(this.dbPath).push(carID);
  }

  //Read
  getCarIdList(): AngularFireList<Cars>{
    return this.CarID;
  }

  //Update
  updateCarID(key: string, modelNum: any, 
    modelName: string, 
    regName: number,
    driverName: string, modelColor: string,
    carBrand: string ): Promise<void> {
    return this.CarID.update(key, modelNum);
  }
}

HTML:

<!--Form Add Vehicle-->
<form #f="ngForm" (ngSubmit)="save(f.value)">
    <div class="row">
        <div class="VehicleForm">

            <div class="form-group">
                <!--Model Number-->
                <label for="modelNum"> Model Number</label>
                <input required #modelNum="ngModel" ngModel name="modelNum" id="modelNum" type="number"
                    class="form-control">
            </div>
            <!--Error when blank-->
            <div class="alert alert-danger" *ngIf="modelNum.touched && modelNum.invalid">Model Number is required
            </div>

            <!--Model Name-->
            <div class="form-group">
                <label for="modelName"> Model Name</label>
                <input required #modelName="ngModel" ngModel name="modelName" id="modelName" type="text"
                    class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="modelName.touched && modelName.invalid">Model ame is required
            </div>

            <!--Reg Name-->
            <div class="form-group">
                <label for="regNum"> Registration Number</label>
                <input required #regNum="ngModel" ngModel name="regName" id="regNum" type="number"
                    class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="regNum.touched && regNum.invalid">Registration Number is required
            </div>

            <button class="btn btn-primary" [disabled]="!f.valid">Add to List</button>
        </div>

        <div class="VehicleForm2">
            <div class="form-group">
                <label for="driverName"> Driver Name</label>
                <input required #driverName="ngModel" ngModel name="driverName" id="driverName" type="text" class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="driverName.touched && driverName.invalid">Driver name is required </div>

            <div class="form-group">
                <label for="modelColor"> Color</label>
                <input required #modelColor="ngModel" ngModel name="modelColor" id="modelColor" type="text" class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="modelColor.touched && modelColor.invalid">Vehicle Color is required </div>

            <div class="form-group">
                <label for="carBrand"> Vehicle Brand</label>
                <input required #carBrand="ngModel" ngModel name="carBrand" id="carBrand" type="text" class="form-control">
            </div>
            <div class="alert alert-danger" *ngIf="carBrand.touched && carBrand.invalid">Vehicle Brand is required </div>

        </div>
    </div>
</form>

Component TS:

import { CarIdService } from './../../car-id.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-vehicle-list',
  templateUrl: './vehicle-list.component.html',
  styleUrls: ['./vehicle-list.component.css']
})
export class VehicleListComponent {

  constructor(private CarIdService: CarIdService){}
 
  save(carID){
    this.CarIdService.create(carID);
  }

}

I already got C. Create and R. Read but I can't perform U. Update and D. Delete. I already tried some other functions but it seems it doesn't fit in my code. Can someone help me how to update my Firebase database using the web app in which I creating?

What codes will I use to perform Update to the database like when I click "edit" besides the row.

Answer 1

You have to work with db: AngularFireDatabase like you done it in create(carID). There you done a push, for update you need to add update call on the list:

  updateCarID(key: string, modelNum: any, 
    modelName: string, 
    regName: number,
    driverName: string, modelColor: string,
    carBrand: string ): Promise<void> {
    return this.db.list(this.dbPath).update(key, value);
  }

The API for AngularFireList can be found here.

From the API:

Adding new items:

const itemsRef = db.list('items');
itemsRef.push({ name: newName });

Replacing items in the list using set:

const itemsRef = db.list('items');
// to get a key, check the Example app below
itemsRef.set('key-of-some-data', { size: newSize });

Updating items in the list using update

const itemsRef = db.list('items');
// to get a key, check the Example app below
itemsRef.update('key-of-some-data', { size: newSize });

Removing items from the list:

const itemsRef = db.list('items');
// to get a key, check the Example app below
itemsRef.remove('key-of-some-data');

Deleting the entire list:

const itemsRef = db.list('items');
itemsRef.remove();

---

A full example for Angular Firebase CRUD using COLLECTIONS can be found in this tutorial.

The example handles users.

Create:

createUser(value, avatar){
  return this.db.collection('users').add({
    name: value.name,
    nameToSearch: value.name.toLowerCase(),
    surname: value.surname,
    age: parseInt(value.age),
    avatar: avatar
  });
}

Read:

getPeople(){
  return new Promise<any>((resolve, reject) => {
    this.afs.collection('/people').snapshotChanges()
    .subscribe(snapshots => {
      resolve(snapshots)
    })
  })
}

Update:

updateUser(userKey, value){
  value.nameToSearch = value.name.toLowerCase();
  return this.db.collection('users').doc(userKey).set(value);
}

Delete:

deleteUser(userKey){
  return this.db.collection('users').doc(userKey).delete();
}