Skip to content

Instantly share code, notes, and snippets.

@nclarx
Created January 14, 2021 08:51
Show Gist options
  • Save nclarx/ef581b0e1a95a2d43531411fe91a9814 to your computer and use it in GitHub Desktop.
Save nclarx/ef581b0e1a95a2d43531411fe91a9814 to your computer and use it in GitHub Desktop.
Example Demonstrating how to Render List of Orders in Angular Component from Firebase Realtime DB w/ Auth using AngularFire
<section>
<ul *ngIf="orders$ | async"> <!-- The *ngIf will hide the whole list until the data has arrived-->
<li *ngFor="let order of orders$ | async"> <!-- The *ngFor will loop over and create list items for the orders once the data has arrived-->
{{order.packageName}}: {{order.packageDescription}}
</li>
</ul>
</section>
import {Component, OnInit} from '@angular/core';
import {Order, OrderService} from './order.service';
import {Observable} from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'ng-fire-so-qtn';
orders$: Observable<Order[]>; // property to hold the observable which will have your array of Orders
constructor(public orderService: OrderService) { // inject the OrderService into the component
}
ngOnInit() {
this.orders$ = this.orderService.getCurrentOrder();
// When this component is initialised it will get the current orders
}
}
import {Injectable} from '@angular/core';
import {EMPTY, Observable} from 'rxjs';
import {AngularFireAuth} from '@angular/fire/auth';
import {switchMap} from 'rxjs/operators';
import {AngularFireDatabase} from '@angular/fire/database';
@Injectable({
providedIn: 'root'
})
export interface Order {
// write interfaces for all of your objects and use them
// when defining variables and function return types.
packageName: string;
packageSize: number;
packageDescription: string;
packageFrom: string;
packageTo: string;
deliveryDate: Date;
receiverNumber: number;
paymentOption: string;
UID: string;
}
export class OrderService {
constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase) {
}
getCurrentOrder(): Observable<Order[] | never> { // note the use of the interface: Order[], which means returning an array of Orders
return this.afAuth.authState // authState is an observable
.pipe( // use pipe
switchMap((user) => { // switchMap gets authState and then lets you return a different observable
// The following returns an observable call to the real-time database:
return user ? this.afDatabase.list<Order>(`delivery-orders/${user.uid}`).valueChanges() // if the user is authenticated an observable with the Orders is returned
: EMPTY; // if the user is not authenticated an empty observable is returned
// NOTE: this observable is not called until it is subscribed to in the template using the `async pipe`, see
// `app.component.html` where it has `*ngFor="let order of orders$ | async"` <== this is what kicks off the request to the database
})
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment