Updating an existing Object in Angular using firebase

Updating an existing Object in Angular using firebase

1. Creating a component.

2. Fetching the list of user and Updating a particular component based on the key or Username.

1. Creating a component

ng g c list --spec=false

The above command generates 3 file's as follow's 

1. list.component.html 
2. list.component.ts
3. list.component.css

Here we will fetch the user's which we have already pushed into firebase in previous post. For reference please visit following link https://angularfirebasedeveloper.blogspot.com/2018/10/pushing-form-data-into-fire-base.html.

2. Fetching the list of user and Updating a particular component based on the key or Username.

In list.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

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

  list = [];
  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    this.getData();
  }

  getData() {
    this.db.list('/login').snapshotChanges().subscribe(res => {
      console.log(res);
      this.list = [];
      for (let i = 0; i < res.length ; i++) {
        const obj = {};
        obj['key'] = res[i].key;
        obj['userInfo'] = res[i].payload.val();
        this.list.push(obj);
      }
      console.log(this.list);
    });
  }

  updateByList(key, userData) {
    this.db.list('/login').update(key, userData).then(res => {
      console.log('updated');
    });
  }

  updateByObject(key, userData) {
    this.db.object('/login/' + key).update(userData).then(res => {
      console.log('updated by object');
    });
  }
}

Description

1. Whenever we want to use angular firebase service's regarding database. we need to import the AngularFireDatabase from @angularfire2/database.
2. Now we need to inject the service with a reference in the constructor as we did in the constructor. 
3. Here db is the reference for AngularFireDatabase and by using this reference we can access any predefined
Method's given by the service.
4. Here we are calling getData() function in component onInit life cycle. ie.. 
when the user navigate's to list component we are trying to get the list of user's from firebase. 
5. list() method is a method given by angularFireDatabase which take's URL as the parameter. 
6. Using list() method we can use snapshotChanges() which is an Observable method given by AngularFireDatabase,  which returns the list of data in the particular URL which we have provided in the list method of AngularFireDatabase.
7. When we subscribe to snapshotChanges() we can get the list of information which exist in the firebase.
8. The reponse contain's an array of object's, where each object contain's bulk of data ie.. key, payload and observable information etc..
9. From the above response we get an auto generated key which is generated by firebase itself.
10. Payload indicate's the whole response related information.
11. If we need only the user's information we can use payload.val() method which returns only the needed data in each object.
12. In the above example we are iterating whole response and pushing key, payload.val() into separate array. (Here it is list[])
13. Now the newly created array will have array of key and userInfo.
14. We can use the newly created array to show user data.
15. When we pass the URL without key, then We can use update method of  angular fire service where it takes 2 parameters i.e.. the Key and object which need's to be updated.
16. When we pass the URL with key, we can use update method with only one parameter i.e.. The updated Object need to be passed.

Displaying User's on a table and updating the username. 

In list.component.html

<form>
  <table>
    <tr *ngFor="let data of list; let i = index">
      <td>
        <input name="{{i}} + 'u'" [(ngModel)]="data.userInfo.username">
      </td>
      <td>
        <input name="{{i}} + 'p'" [(ngModel)]="data.userInfo.password" 
                readonly>
      </td>
      <td>
        <button (click)="updateByList(data.key, data.userInfo)">
          Update by list</button>
      </td>
      <td>
        <button (click)="updateByObject(data.key)">
          Update by Object</button>
      </td>
    </tr>
  </table>
</form>

Description

1. In the above Html file we are iterating the List array to display User's With editable field's 
2. List indicate's the list of user's 
3. Data indicate's each object in the list.
4. we are creating name attribute as unique. So i'm using index appended with a string. (Always try to create unique name in the form when you are using two way binding or ngModel).
5. Here we have made password as readonly, so the user can't edit the password field.
5. When user change's data he can update the particular user info either by clicking "Update by list" button or by clicking "Update by Object" button.

list.component.css

table {
    border: 1px solid black;
}

td {
    border: 1px solid black;
}

tr {
    border: 1px solid black;
}

Com

Note

1. Alway's try to use update method with one parameter to increase the performance and to update the data easily, As there is no need to loop the entire user's list.