AngularFire for Angular 2

Angular · 35K views · 2016 · 1:26:02

Open on YouTube

Web developmentSoftware architecture & designtalkdated

Why Stack Overflow recommends it

Stack Overflow users link it as the reference for AngularFire2 patterns, especially nesting observables to join Firebase lists with related objects.

Recommended by 0 people across 0 different months, 2016 to 2016.

What it is

A 2016 Angular team conference session in which David East and Jeff Cross present AngularFire2, the library for using Firebase with Angular 2 and RxJS observables. The recording also includes lightning talks on the SystemJS loader and hot reloading in Angular.

What people said

Cites DivZero · 2016-05 · Stack Overflow · on “Nested Observables in Angular2 using AngularFire2 not rendering in view”

I'm building an experimental (Ionic 2) app that uses Firebase and AngularFire2 (currently in alpha). For this I'm following this tutorial from Aaron Saunders as a basis: [LINK] [LINK] Below are my home.ts and my home.html. this.projects = af.list('/items').map( (items) => { return items.map( item => { item.meta = af.object(`/item_meta/${item.$key}`) return item }) }) This way of nesting the Observables returns by AngularFire2 was demonstrated in the following presentation: [this video] Here is my view: <ion-card *ngFor="#item of items | async"> <ion-card-header> {{item.name}} </ion-card-header> <ion-card-content> {{item.description}} <br> {{item.meta.stockPrice | async}} </ion-card-content> </ion

Cites GreedyAi · 2016-08 · Stack Overflow · on “Why am I missing angular-cli-build.js? Do I have to use it?”

I am trying to build a webpage using angular2, Firebase 3 SDK and angularfire2. I have recently gotten to all of these frameworks or SDKs. So I have some difficulties understanding all the functions in files like systemjs.config, typings.json, tsconfig.json,packages.json and etc. I think for now I got some understanding about these files, but I'm not confident enough to configure all of them for my project. I followed the angular2 Tour of Heroes tutorial [LINK] successfully and now Im trying to transform that angular2 Tour of Heroes web page to my own web page. Currently I am trying to use Firebase 3.0 sdk instead of liteserver and in-memory-data.service, so I decided to look into angularfir

Cites j809809jkdljfja · 2016-10 · Stack Overflow · on “Loop through angularfire2 list”

I think you can get the data as the original snapshot by specifying the preserveSnapshot option as described here: Retrieving the snapshot [LINK] and then iterate as you need. let myItems = []; let orderItems = this.af.database.list('/order_items', { preserveSnapshot: true } ); this.orderItems.subscribe((itemKeys) => { itemKeys.forEach((itemKey) => { let item = this.af.database.object('/items/'+itemKey.key); item.subscribe((itemData) => { myItems.push(itemData); }); }); }) I think you could also map the items with the keys to order_items right away, something like here: AngularFire for Angular 2 [this video] , but I am not sure how to do this, since I am new to ng2, af2 and firebase.

Cites user1664803 · 2016-11 · Stack Overflow · on “RXJS & Angularfire mapping not working”

I try to map 2 Firebase calls together. I am using AngularFire2 and RXJS. I am getting a list with ID's and i want to get the object with that ID const path = `/lists/${auth.$uid}`; this.lijsten = map.call(af.database.list(path), (vals: any[]) => { return vals.map((m) => { m.shapes = af.database.object(`/lists/${m.$key}`); return m; }); }); This doesn't work for an extra firebase call. The call works, but it can't convert to JSON. If I replace it for a String, it works. I got this example from the youtube video from angular [this video] But when i use this example i can't convert it to json lijsten | async | json gives Converting circular structure to JSON at JSON.stringify () Is there a better w