angularfire2

Firestore + AngularFire2 pagination ( query items by range - .startAfter(lastVisible) )

一个人想着一个人 提交于 2019-11-30 23:14:39
In a component I want to pull a range of items from FireStore, for ex. from 0 to 5, from 5 to 10 etc. I found this in FireStore's docs, but they dont use AngularFire2 so as harder I tried to refactor as bigger mess I got. I made it working by simply splice() 'ing: service -> topFirstScores(): AngularFirestoreCollection<Score> { return this.fireRef.collection('scores', r => r .orderBy('score', 'desc').limit(6) ); } component -> $scores = new Subject(); this.scores$ = this.$scores.asObservable(); if (this.scores === 'first') { this.scoreS.topFirstScores().valueChanges().take(1) .subscribe(_ =>

Angular 4, angularfire2, Metadata version mismatch

こ雲淡風輕ζ 提交于 2019-11-30 18:14:38
I've got the following error Metadata version mismatch for module c:/..../node_modules/angularfire2/index.d.ts, found version4, expected 3. And if I go and check in my package.json , I have angularfire2 on version 5.0.0-rc.4, and firebase on 4.6.2. see screenshot for details I tried changing the version of angularfire2 and firebase to previous versions but nothing worked. Any suggestions ? Thank you. { "name": "twitter-revamped", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },

Animation for newly rendered elements, but not on page load

ε祈祈猫儿з 提交于 2019-11-30 17:38:17
问题 I'm subscribed to a Firebase real-time database so that when I submit something to it, it immediately renders in the view without any need for jQuery or ajax. I'd like to animate the rendering of such elements, so that when a new element is added to the DOM its div 's background-color is green and slowly fades away. What I don't want is for all div s of this class to perform this animation on load. I know how to do the former: @keyframes green-fade { 0% {background: rgb(173, 235, 173);} 100%

Property 'pipe' does not exist on type 'AngularFireObject<{}>'

天涯浪子 提交于 2019-11-30 16:44:22
I'm a beginner to Angular. I'm watching the tutorial of Mosh Hamedani using the Angular version 6 but the problem is the tutorial version is 4. I'm working on the e-commerce project on AddToCart button where the product should increase it's quantity by clicking the button and updated in Firebase using productId and also if I try to add new product then id of that new product should add in AngularFire Database. Everything is working perfectly now I'm getting error in shopping-cart.service.ts file. The error is in the last line async addToCart(product: Product) where the error shows property

Angular 4, angularfire2, Metadata version mismatch

坚强是说给别人听的谎言 提交于 2019-11-30 16:41:34
问题 I've got the following error Metadata version mismatch for module c:/..../node_modules/angularfire2/index.d.ts, found version4, expected 3. And if I go and check in my package.json , I have angularfire2 on version 5.0.0-rc.4, and firebase on 4.6.2. see screenshot for details I tried changing the version of angularfire2 and firebase to previous versions but nothing worked. Any suggestions ? Thank you. { "name": "twitter-revamped", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng",

Firebase storage and angularfire2

≯℡__Kan透↙ 提交于 2019-11-30 16:08:22
问题 How do to get the images from Fire base storage using angular fire 2. Thanks a lot! constructor(public af: AngularFire) { this.items = af.database.list('/message'); this.picture = af.database.list('/profile'); } 回答1: Right now there isn't an official integration with AngularFire2 and Firebase Storage. However, it's quite easy to use the regular SDK. @Component({ }) class MyComponent { image: string; constructor() { const storageRef = firebase.storage().ref().child('path/image.png');

'Joining' Firebase Queries in Angularfire2

若如初见. 提交于 2019-11-30 14:08:53
Update: The issues I was encountering with the empty value fields had to do with non-existent keys in my database, so most of the discourse here won't apply to your question. If you're looking for a way to 'join' queries in AngularFire2, the accepted answer below does a fine job of this. I'm currently using combineLatest instead of forkJoin . In order to do this you have to import 'rxjs/add/observable/combineLatest'; . I have the following denormalized Firebase structure: members -memberid1 -threads -threadid1: true, -threadid3: true -username: "Adam" ... threads -threadid1 -author: memberid3

Firestore: Add Custom Object to db

半世苍凉 提交于 2019-11-30 08:43:07
Good Morning, I tried adding a new created object from this class: export class Sponsor implements ISponsor { title: string; description?: string; creation: ICreation; constructor(title: string, description: string, author: string) { this.title = title; this.description = description; this.creation = new Creation(author); } } and in my service, the create function looks like: createSponsor(sponsor) { sponsor.id = this.afs.createId(); return this.collection.doc(sponsor.id).set(sponsor); } When I try it this way, I get the following error: FirebaseError: [code=invalid-argument]: Function

Angular 2 Firebase Observable to promise doesn't return anything

纵饮孤独 提交于 2019-11-30 06:49:16
I'm currently working on an Angular 2 project with AngularFire2 and I'm trying to convert a FirebaseListObservable to a Promise. I know that it doesn't make much sense since Observables are more useful but this function will be part of another function where multiple promises are chained. And I'm not familiar with how to subscribe to Observables within a chain of promises... The function gets executed in the service, however it seems to not return anything. Basically, what I want to do is check in a Firebase list if an object with a certain name already exists and return either true or false.

Angular 2 AuthGuard + Firebase Auth

↘锁芯ラ 提交于 2019-11-30 06:26:19
问题 I'm trying to build an AuthGuard for Angular 2 routes using Firebase Auth. This is the AuthGuard Service: import { Injectable } from '@angular/core'; import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(private AuthService: AuthService, private router: Router) {} canActivate(route: ActivatedRouteSnapshot, state: