environment.ts to store api, keys@angular/fire provides AngularFireDatabase service that allows us to work with the Realtime Database.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: 41db.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();angu1// 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();