Firebase (with Angular)

1export class ... {
2	constructor(db: AngularFireDatabase) {
3		db
4			.list() // reading list of objects
5			// .object() // reading 1 object
6	}
7}

1interface DocumentChangeAction {
2  //'added' | 'modified' | 'removed';
3  type: DocumentChangeType;
4  payload: DocumentChange;
5}
6
7interface DocumentChange {
8  type: DocumentChangeType;
9  doc: DocumentSnapshot;
10  oldIndex: number;
11  newIndex: number;
12}
13
14interface DocumentSnapshot {
15  exists: boolean;
16  ref: DocumentReference;
17  id: string;
18  metadata: SnapshotMetadata;
19  data(): DocumentData;
20  get(fieldPath: string): any;
21}

1@Component({
2  selector: 'app-root',
3  template: `
4  <ul>
5    <li *ngFor="let item of items | async">
6      <input type="text" #updatetext [value]="item.text" />
7      <button (click)="updateItem(item.key, updatetext.value)">Update</button>
8      <button (click)="deleteItem(item.key)">Delete</button>
9    </li>
10  </ul>
11  <input type="text" #newitem />
12  <button (click)="addItem(newitem.value)">Add</button>
13  <button (click)="deleteEverything()">Delete All</button>
14  `,
15})
16export class AppComponent {
17  itemsRef: AngularFireList<any>;
18  items: Observable<any[]>;
19  constructor(db: AngularFireDatabase) {
20    this.itemsRef = db.list('messages');
21    // Use snapshotChanges().map() to store the key
22    this.items = this.itemsRef.snapshotChanges().pipe(
23      map(changes => 
24        changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
25      )
26    );
27  }
28  addItem(newName: string) {
29    this.itemsRef.push({ text: newName });
30  }
31  updateItem(key: string, newText: string) {
32    this.itemsRef.update(key, { text: newText });
33  }
34  deleteItem(key: string) {
35    this.itemsRef.remove(key);
36  }
37  deleteEverything() {
38    this.itemsRef.remove();
39  }
40}

1import { AngularFireDatabase} from '@angular/fire/database';
2
3export class TutorialService {
4  constructor(private db: AngularFireDatabase) { }
5}

1.list('conversations/-MSYAXjrlcXdzZAIRp_U')
2.snapshotChanges()
3.pipe(
4  map((data: AngularFireAction<DatabaseSnapshot<any>>[]) =>{
5      /*###Thi*/ console.log('data: ', data);
6			return ...
7    }
8  )
9);
10
11// output
120: {payload: DataSnapshot, type: "value", prevKey: null, key: "facebook"}
131: {payload: DataSnapshot, type: "value", prevKey: "facebook", key: "google"}
142: {payload: DataSnapshot, type: "value", prevKey: "google", key: "sandbox"}
153: {payload: DataSnapshot, type: "value", prevKey: "sandbox", key: "web"}
16length: 4

1db.list('/items', ref => ref.orderByChild('size').equalTo('large'))

1tutorial: AngularFireObject<any>;
2// db: AngularFireDatabase
3this.tutorial = db.object('tutorial');
4 
5// or
6Observable<any> tutorial = db.object('tutorial').valueChanges();

1const tutRef = db.object('tutorial');
2 
3// set() for destructive updates
4tutRef.set({ title: 'zkoder Tutorial'});
5
6// update
7tutRef.update({ url: 'bezkoder.com/zkoder-tutorial' });
8
9// delete
10tutRef.remove();

1// Get an Observable of data as a synchronized array of JSON objects
2// without snapshot metadata.
3tutorials: Observable<any[]>;
4// db: AngularFireDatabase
5this.tutorials = db.list('tutorials').valueChanges();angu

1// Get an Observable of data as a synchronized array of 
2// AngularFireAction<DatabaseSnapshot>[] with metadata 
3// (the underyling DatabaseReference and snapshot key):
4tutorials: Observable<any[]>;
5this.tutorials = db.list('tutorials').snapshotChanges();

1// create a list and push a new object
2const tutorialsRef = db.list('tutorials');
3tutorialsRef.push({ title: 'zkoder Tutorial', url: 'abc/xyz' });

1const tutorialsRef = db.list('tutorials');
2
3// update using .set() <- delete all and replace with the new
4tutorialsRef.set('key', { title: 'zkoder Tut#1', url: 'bezkoder.com/zkoder-tut-1' });
5
6// update using .update() <- jusy update a specific key
7tutorialsRef.update('key', { title: 'zkoder new Tut#1' });
8
9// delete an object
10tutorialsRef.remove('key');
11
12// delete entire list
13tutorialsRef.remove();