I have a list of objects from Firebase using the angularFire
implicit data sync, and I'd like to render their unique ids (for use in urls) along with the other data properties using ng-repeat
. Can I make angularFire
return in such a way that I have access to the object ids within ng-repeat
, the same way that members of an angularFireCollection
have an $id
property? If not, what is the right way to accomplish this? Hypothetical code (that doesn't work):
Controller:
myApp.controller('ItemListCtrl', ['$scope', 'angularFire',
function ItemListCtrl($scope, angularFire) {
var ref = new Firebase(firebaseUrl);
angularFire(ref, $scope, 'items');
}
]);
View:
<div ng-repeat="item in items" >
<a href="" ng-href="#/items/{{item.name()}}">{{item.text}}</a>
</div>
To activate the Firebase Authentication service, go inside your Firebase admin area and enable the Email/Password sign-in option inside the Authentication section. Now, we’ll run the below command in the terminal to install AngularFire2 library from Node Package Manager. This command includes the Firebase SDK inside your project.
Please note that, at the time of writing this tutorial, the Angular fire v.7.0 API is still in development, and isn’t feature complete; and the docs aren’t yet updated to the latest version. AngularFire provides a compatibility layer that will allow you to use the latest version of the library, while fully supporting the AngularFire v6.0 API.
Inside our authService, the first thing we’ll need to do is inject the AngularFire Auth instance in the constructor. Then, we’ll create a login method, which will receive the login data (email and password), and use the signInWithEmailAndPassword AngularFire method to sign in: However, doesn’t something about our login function seem a little off?
Firestore is a flexible, scalable database for mobile, web, and server development. In this article, you will learn to develop a fully functioning authentication system in Angular using Firestore. We will be using the official tool for Angular and Firebase integration – AngularFire.
I think all you need is:
<div ng-repeat="(name, item) in items">
<a href="" ng-href="#/items/{{name}}">{{item.text}}</a>
</div>
The anglularFire object behaves just like a normal javascript object.
To get the unique ID that is created via the angularfire $add method, you can use the $id property:
<div ng-repeat="item in items" >
<a href="" ng-href="#/items/{{item.$id}}">{{item.text}}</a>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With