Get up and running with Firestore and AngularFire5. Learn how to use the Firebase Firestore database to query, update, and manage offline data. https://angularfirebase.com/lessons/firestore-with-angularfire-basics/

Demo: https://firestarter-96e46.firebaseapp.com/
Firestore: https://firebase.googleblog.com/2017/10/introducing-cloud-firestore.html
AngularFire: https://github.com/angular/angularfire2
More Lessons: https://angularfirebase.com
2024-02-04T08:03:09.993Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c6dac86f-8733-4f55-833f-40f038159088
ed3d7c8e18e315688b6c68582781f1c8dd42b3d72654d0471fe343b3882bf11c
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Just yesterday, Firebase launched an exciting new product called Firestore.
Simultaneously, AngularFire was updated to version 5 which supports Firestore and brings in a whole bunch of other important changes.
In this episode, I'm going to show you how to use the Firestore module in Angular as well as talk about the benefits that Firestore brings app developers.
Then over the next couple weeks, I'm going to release a whole bunch of new videos showing you how to build real world features with Firestore.
So make sure to subscribe if you're just finding me for the first time.
Before we get to the code, let's first distinguish what Firestore is and how it relates to the existing real time database that's already in Firebase.
Firestore is a NoSQL database that solves many of the limitations that developers have found with the real time database.
In other words, it does pretty much everything the real time database does with a few extra features on top.
The first advantage is being able to query nested data in a memory friendly way.
In the real time database, you would have to load all of an object's nested data, which makes it hard to organize data properly.
With Firestore, you can create a tree of documents that point to other documents or other collections of documents.
This makes it easy to model data relationships and make queries that are shallow and memory friendly.
Another major benefit is its query language, which we'll see later in the code, but it has a where statement that you can use to filter data by equality.
For example, name equals the string of Jeff, or with range operators where the score is greater than 23.
And it allows you to build indices where you can efficiently make these queries.
Firestore will build an index for each individual property, then then you have the option to create your own based on multiple properties.
Now that we know that, let's actually build something with Firestore.
I built a new feature into our Firestarter demo app that uses Firestore on the back end, which you can check out in the link in the description.
If you're brand new to AngularFire, you can follow the install instructions on the GitHub page.
But I'm going to assume you have an existing Angular application and show you how to upgrade it to AngularFire 5.
So first, you'll have to uninstall AngularFire 2 with NPM, then reinstall it, making sure that the version is 5 point o or greater.
Then I should warn you that there are many breaking changes in version 5, so make sure to read through the docs carefully before you update an existing app.
Then another minor change is you need to have a project ID listed in your Firebase config.
Firestore won't work without it, so make sure to include that.
In my case, it's in the environment ts file.
From there, you'll need to add it tier app module.
So we'll import the AngularFirestore module and then just add it to the import section.
Then we'll go into the app component and import AngularFirestore as well as the AngularFire document and AngularFire collection.
And from RXJS, we'll import observable and map.
Firestore encourages the use of TypeScript.
So we're going to create an interface called note, which will define our data structure, which is just going to be a content is a string and then hearts as a number.
And we'll also give it an optional ID property.
The first thing I wanna show you is how to work with collections which are just a list of documents.
Is the real time database equivalent to a list.
So first we make a reference to a collection and we do that by typing it as an AngularFire our collection with our note interface.
Then we'll get our data back as an observable in a second variable, which we'll type as an array of notes.
So that's one of the biggest changes in AngularFire 5.
The reference to some data is decoupled from the actual observable data itself.
We can make a reference to a collection by calling a f s collection and whatever collection we wanna receive, in this case, notes.
So at this point, we just have a reference to the collection, we can get observable data back from it by calling value changes.
This is roughly the equivalent to a Firebase list observable and previous versions of AngularFire.
So we can loop over the data in the HTML by just calling n g 4 with the async pipe, then we can print it out to the screen as JSON.
Then we get data back in the screen as expected.
But I wanna point out that the data is not ordered in any specific way.
You can see we have strings and numbers in different orders, but Firestore can help us out with that.
You can pass a callback to the collection reference to take advantage of the Firestore query language.
The first thing we'll do here is order by the content, which is a string value.
Then we can get our notes back in alphabetical order based on the content.
So now you can see they're ordered a, b, c, d.
If we do the same thing for hearts, we'll get the hearts back in ascending order.
So we have hearts 0667.
If we wanna flip this around, we just pass the descending keyword, and we're good to go.
Doing this kind of stuff was extremely difficult in the real time database, so this is a huge advantage if you're doing a lot of sorting and organizing of data.
You can also limit the amount of results you get back by just calling limit just like you would in a regular SQL database.
You also have a few other operators that will offset where you start from so you can do things like pagination and infinite scroll.
I'll cover those in more detail in a future lesson.
Right now, I wanna show you what happens if we try to combine 2 order by operators on 2 different properties.
Initially, it's going to give us an error in the console.
But what we'll see here is we have a link in this console to build an index for this query.
If we copy and paste the link, it's going to take us to the Firebase console and give us the option to create this index.
It takes a few minutes, but once you have the index back then you'll be able to make this query efficiently.
If we go back to Angular then we see that this query is sorted by 2 different properties now.
The next thing we're going to look at is the where statement.
This allows us to make queries in a more expressive kind of way.
For this query, we want notes where hearts are greater than or equal to 5.
Then you can see on the front end we get the notes filtered by that rule.
We can also filter by equality, so we can do hearts equal to 7, and then we should only get back the notes with that parameter.
But I should mention you can't use the not equal operator.
Attempting to use it will cause your app to crash, so just be aware of that.
What you can do is use the equality operator to chain together with multiple where clauses.
So we could say where hearts equals 6 and content equals triple a.
An important caveat is that this only works with the equality operator.
If you try to do this with a range operator you're going to get an error.
So if we change equality to greater than and try to run it we're going to see an error in the front end.
So that's how the query language works.
Now I wanna show you a little bit more about how the observables work.
In most cases, you should only need to call value changes which send back the raw data from the database.
But if you need additional metadata, you can return the actual snapshot.
And AngularFire also has a way to return it in an n g r x redux friendly way, but I'll save that for a future video.
You get the snapshot by calling snapshot changes and then I'll show you what this looks like in the console just so you get an idea of what's actually contained in there.
So if we look at the actual array, we can see we have a type, which is the type of event that occurred that could be added, modified, or removed.
And then we also have the old index, new index.
We can retrieve the ID and some other metadata as well.
So at this point, we've been working in the context of collections, but we can also retrieve individual documents.
So to do that, we're going to make a reference to a document just like we did with the collection.
The only difference now is it's an AngularFirestore document type, and it also has the value changes method that will return an observable.
So just like we did before, we make a reference to the note document by calling a f s doc.
And for this example, I'll just go ahead and copy and paste a random ID from the database.
Then we will build the observable by calling value changes.
Then I'll go ahead and update the HTML to display the data from this document.
Then as expected, the data is displayed on the front end.
The next thing I'll show you is how to perform write operations on the data.
This works basically the same as it did in the previous versions of AngularFire.
The only difference is we call these methods on the reference itself rather than on the observable.
I'm setting up this new content variable to represent the form input of a user.
When the form is submitted, we call update on the document reference and pass it the new data.
You also have the option to use set or delete on the document reference.
Then we can jump back to the HTML and collect the user's input with NG model and run the update method on a button click.
If we go try it out, we can see our data gets updated in real time just like it would with the real time database.
Let's go ahead and pull up the Firebase console side by side.
You can see how both applications are subscribed to the same data.
So we can update the data from our app or we can update the data from the Firebase console, and everything stays synced up in real time.
At this point, I only have one last thing to show you, and that's how to set up offline data, which is extremely easy with AngularFire.
All we have to do is go back into the app module and add this enable persistence method on the import.
And amazingly, that's all you have to do.
Now you have offline data capabilities built into your app.
So let me show you how this works.
We'll go back to our app, and will turn off the Internet connection by going to the network and putting it in offline mode.
Then we'll try to make an update on the data reference, which will still work in the app front end, so it's gonna look fine to the user, but we get this Internet not connected error in the console.
Then if we go back to the Firestore console, we'll see that the actual data is not updated on the back end.
AngularFire is keeping track of the updates, and when the Internet comes back on, it's going to send them to Firebase and update the back end.
This is an awesome feature for progressive web apps where you can still have some interactivity even when the app is offline.
Now that I've turned the Internet back on, we can go into the console, and we'll see that it does get the updated data after the Internet comes back online.
That's it for my Firestore introduction.
If this video helped you, please like and subscribe.
And if you wanna learn how to build more awesome features with Firestore, were considered becoming a pro member at angularfirebase.com.
Thanks for watching and I'll see you soon.

Speaker 0: Just yesterday, Firebase launched an exciting new product called Firestore. Simultaneously, AngularFire was updated to version 5 which supports Firestore and brings in a whole bunch of other important changes. In this episode, I'm going to show you how to use the Firestore module in Angular as well as talk about the benefits that Firestore brings app developers. Then over the next couple weeks, I'm going to release a whole bunch of new videos showing you how to build real world features with Firestore. So make sure to subscribe if you're just finding me for the first time.

Before we get to the code, let's first distinguish what Firestore is and how it relates to the existing real time database that's already in Firebase. Firestore is a NoSQL database that solves many of the limitations that developers have found with the real time database. In other words, it does pretty much everything the real time database does with a few extra features on top. The first advantage is being able to query nested data in a memory friendly way. In the real time database, you would have to load all of an object's nested data, which makes it hard to organize data properly.

With Firestore, you can create a tree of documents that point to other documents or other collections of documents. This makes it easy to model data relationships and make queries that are shallow and memory friendly. Another major benefit is its query language, which we'll see later in the code, but it has a where statement that you can use to filter data by equality. For example, name equals the string of Jeff, or with range operators where the score is greater than 23. And it allows you to build indices where you can efficiently make these queries.

Firestore will build an index for each individual property, then then you have the option to create your own based on multiple properties. Now that we know that, let's actually build something with Firestore. I built a new feature into our Firestarter demo app that uses Firestore on the back end, which you can check out in the link in the description. If you're brand new to AngularFire, you can follow the install instructions on the GitHub page. But I'm going to assume you have an existing Angular application and show you how to upgrade it to AngularFire 5.

So first, you'll have to uninstall AngularFire 2 with NPM, then reinstall it, making sure that the version is 5 point o or greater. Then I should warn you that there are many breaking changes in version 5, so make sure to read through the docs carefully before you update an existing app. Then another minor change is you need to have a project ID listed in your Firebase config. Firestore won't work without it, so make sure to include that. In my case, it's in the environment ts file.

From there, you'll need to add it tier app module. So we'll import the AngularFirestore module and then just add it to the import section. Then we'll go into the app component and import AngularFirestore as well as the AngularFire document and AngularFire collection. And from RXJS, we'll import observable and map. Firestore encourages the use of TypeScript.

So we're going to create an interface called note, which will define our data structure, which is just going to be a content is a string and then hearts as a number. And we'll also give it an optional ID property. The first thing I wanna show you is how to work with collections which are just a list of documents. Is the real time database equivalent to a list. So first we make a reference to a collection and we do that by typing it as an AngularFire our collection with our note interface.

Then we'll get our data back as an observable in a second variable, which we'll type as an array of notes. So that's one of the biggest changes in AngularFire 5. The reference to some data is decoupled from the actual observable data itself. We can make a reference to a collection by calling a f s collection and whatever collection we wanna receive, in this case, notes. So at this point, we just have a reference to the collection, we can get observable data back from it by calling value changes.

This is roughly the equivalent to a Firebase list observable and previous versions of AngularFire. So we can loop over the data in the HTML by just calling n g 4 with the async pipe, then we can print it out to the screen as JSON. Then we get data back in the screen as expected. But I wanna point out that the data is not ordered in any specific way. You can see we have strings and numbers in different orders, but Firestore can help us out with that.

You can pass a callback to the collection reference to take advantage of the Firestore query language. The first thing we'll do here is order by the content, which is a string value. Then we can get our notes back in alphabetical order based on the content. So now you can see they're ordered a, b, c, d. If we do the same thing for hearts, we'll get the hearts back in ascending order.

So we have hearts 0667. If we wanna flip this around, we just pass the descending keyword, and we're good to go. Doing this kind of stuff was extremely difficult in the real time database, so this is a huge advantage if you're doing a lot of sorting and organizing of data. You can also limit the amount of results you get back by just calling limit just like you would in a regular SQL database. You also have a few other operators that will offset where you start from so you can do things like pagination and infinite scroll.

I'll cover those in more detail in a future lesson. Right now, I wanna show you what happens if we try to combine 2 order by operators on 2 different properties. Initially, it's going to give us an error in the console. But what we'll see here is we have a link in this console to build an index for this query. If we copy and paste the link, it's going to take us to the Firebase console and give us the option to create this index.

It takes a few minutes, but once you have the index back then you'll be able to make this query efficiently. If we go back to Angular then we see that this query is sorted by 2 different properties now. The next thing we're going to look at is the where statement. This allows us to make queries in a more expressive kind of way. For this query, we want notes where hearts are greater than or equal to 5.

Then you can see on the front end we get the notes filtered by that rule. We can also filter by equality, so we can do hearts equal to 7, and then we should only get back the notes with that parameter. But I should mention you can't use the not equal operator. Attempting to use it will cause your app to crash, so just be aware of that. What you can do is use the equality operator to chain together with multiple where clauses.

So we could say where hearts equals 6 and content equals triple a. An important caveat is that this only works with the equality operator. If you try to do this with a range operator you're going to get an error. So if we change equality to greater than and try to run it we're going to see an error in the front end. So that's how the query language works.

Now I wanna show you a little bit more about how the observables work. In most cases, you should only need to call value changes which send back the raw data from the database. But if you need additional metadata, you can return the actual snapshot. And AngularFire also has a way to return it in an n g r x redux friendly way, but I'll save that for a future video. You get the snapshot by calling snapshot changes and then I'll show you what this looks like in the console just so you get an idea of what's actually contained in there.

So if we look at the actual array, we can see we have a type, which is the type of event that occurred that could be added, modified, or removed. And then we also have the old index, new index. We can retrieve the ID and some other metadata as well. So at this point, we've been working in the context of collections, but we can also retrieve individual documents. So to do that, we're going to make a reference to a document just like we did with the collection.

The only difference now is it's an AngularFirestore document type, and it also has the value changes method that will return an observable. So just like we did before, we make a reference to the note document by calling a f s doc. And for this example, I'll just go ahead and copy and paste a random ID from the database. Then we will build the observable by calling value changes. Then I'll go ahead and update the HTML to display the data from this document.

Then as expected, the data is displayed on the front end. The next thing I'll show you is how to perform write operations on the data. This works basically the same as it did in the previous versions of AngularFire. The only difference is we call these methods on the reference itself rather than on the observable. I'm setting up this new content variable to represent the form input of a user.

When the form is submitted, we call update on the document reference and pass it the new data. You also have the option to use set or delete on the document reference. Then we can jump back to the HTML and collect the user's input with NG model and run the update method on a button click. If we go try it out, we can see our data gets updated in real time just like it would with the real time database. Let's go ahead and pull up the Firebase console side by side.

You can see how both applications are subscribed to the same data. So we can update the data from our app or we can update the data from the Firebase console, and everything stays synced up in real time. At this point, I only have one last thing to show you, and that's how to set up offline data, which is extremely easy with AngularFire. All we have to do is go back into the app module and add this enable persistence method on the import. And amazingly, that's all you have to do.

Now you have offline data capabilities built into your app. So let me show you how this works. We'll go back to our app, and will turn off the Internet connection by going to the network and putting it in offline mode. Then we'll try to make an update on the data reference, which will still work in the app front end, so it's gonna look fine to the user, but we get this Internet not connected error in the console. Then if we go back to the Firestore console, we'll see that the actual data is not updated on the back end.

AngularFire is keeping track of the updates, and when the Internet comes back on, it's going to send them to Firebase and update the back end. This is an awesome feature for progressive web apps where you can still have some interactivity even when the app is offline. Now that I've turned the Internet back on, we can go into the console, and we'll see that it does get the updated data after the Internet comes back online. That's it for my Firestore introduction. If this video helped you, please like and subscribe.

And if you wanna learn how to build more awesome features with Firestore, were considered becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you soon.
Just yesterday, Firebase launched an exciting new product called Firestore. Simultaneously, AngularFire was updated to version 5 which supports Firestore and brings in a whole bunch of other important changes.
In this episode, I'm going to show you how to use the Firestore module in Angular as well as talk about the benefits that Firestore brings app developers. Then over the next couple weeks, I'm going to release a whole bunch of new videos showing you how to build real world features with Firestore. So make sure to subscribe if you're just finding me for the first time. Before we get to the code, let's first distinguish what Firestore is and how it relates to the existing real time database that's already in Firebase.
streaming
youtube
Firestore is a NoSQL database that solves many of the limitations that developers have found with the real time database. In other words, it does pretty much everything the real time database does with a few extra features on top. The first advantage is being able to query nested data in a memory friendly way. In the real time database, you would have to load all of an object's nested data, which makes it hard to organize data properly. With Firestore, you can create a tree of documents that point to other documents or other collections of documents. This makes it easy to model data relationships and make queries that are shallow and memory friendly. Another major benefit is its query language, which we'll see later in the code, but it has a where statement that you can use to filter data by equality. For example, name equals the string of Jeff, or with range operators where the score is greater than 23. And it allows you to build indices where you can efficiently make these queries. Firestore will build an index for each individual property, then then you have the option to create your own based on multiple properties.
databases
data management
data
programming
documentation
commerce
data analysis
Now that we know that, let's actually build something with Firestore. I built a new feature into our Firestarter demo app that uses Firestore on the back end, which you can check out in the link in the description. If you're brand new to AngularFire, you can follow the install instructions on the GitHub page. But I'm going to assume you have an existing Angular application and show you how to upgrade it to AngularFire 5. So first, you'll have to uninstall AngularFire 2 with NPM, then reinstall it, making sure that the version is 5 point o or greater. Then I should warn you that there are many breaking changes in version 5, so make sure to read through the docs carefully before you update an existing app. Then another minor change is you need to have a project ID listed in your Firebase config. Firestore won't work without it, so make sure to include that. In my case, it's in the environment ts file. From there, you'll need to add it tier app module. So we'll import the AngularFirestore module and then just add it to the import section. Then we'll go into the app component and import AngularFirestore as well as the AngularFire document and AngularFire collection. And from RXJS, we'll import observable and map.
Firestore encourages the use of TypeScript. So we're going to create an interface called note, which will define our data structure, which is just going to be a content is a string and then hearts as a number. And we'll also give it an optional ID property. The first thing I wanna show you is how to work with collections which are just a list of documents. Is the real time database equivalent to a list. So first we make a reference to a collection and we do that by typing it as an AngularFire our collection with our note interface. Then we'll get our data back as an observable in a second variable, which we'll type as an array of notes. So that's one of the biggest changes in AngularFire 5. The reference to some data is decoupled from the actual observable data itself. We can make a reference to a collection by calling a f s collection and whatever collection we wanna receive, in this case, notes. So at this point, we just have a reference to the collection, we can get observable data back from it by calling value changes.
databases
data
data management
documentation
This is roughly the equivalent to a Firebase list observable and previous versions of AngularFire. So we can loop over the data in the HTML by just calling n g 4 with the async pipe, then we can print it out to the screen as JSON. Then we get data back in the screen as expected. But I wanna point out that the data is not ordered in any specific way. You can see we have strings and numbers in different orders, but Firestore can help us out with that. You can pass a callback to the collection reference to take advantage of the Firestore query language. The first thing we'll do here is order by the content, which is a string value. Then we can get our notes back in alphabetical order based on the content. So now you can see they're ordered a, b, c, d. If we do the same thing for hearts, we'll get the hearts back in ascending order.
So we have hearts 0667. If we wanna flip this around, we just pass the descending keyword, and we're good to go. Doing this kind of stuff was extremely difficult in the real time database, so this is a huge advantage if you're doing a lot of sorting and organizing of data. You can also limit the amount of results you get back by just calling limit just like you would in a regular SQL database. You also have a few other operators that will offset where you start from so you can do things like pagination and infinite scroll. I'll cover those in more detail in a future lesson.
databases
data
data management
Right now, I wanna show you what happens if we try to combine 2 order by operators on 2 different properties. Initially, it's going to give us an error in the console. But what we'll see here is we have a link in this console to build an index for this query. If we copy and paste the link, it's going to take us to the Firebase console and give us the option to create this index. It takes a few minutes, but once you have the index back then you'll be able to make this query efficiently. If we go back to Angular then we see that this query is sorted by 2 different properties now. The next thing we're going to look at is the where statement. This allows us to make queries in a more expressive kind of way. For this query, we want notes where hearts are greater than or equal to 5. Then you can see on the front end we get the notes filtered by that rule.
We can also filter by equality, so we can do hearts equal to 7, and then we should only get back the notes with that parameter. But I should mention you can't use the not equal operator. Attempting to use it will cause your app to crash, so just be aware of that.
logic
What you can do is use the equality operator to chain together with multiple where clauses. So we could say where hearts equals 6 and content equals triple a. An important caveat is that this only works with the equality operator. If you try to do this with a range operator you're going to get an error.
So if we change equality to greater than and try to run it we're going to see an error in the front end. So that's how the query language works. Now I wanna show you a little bit more about how the observables work. In most cases, you should only need to call value changes which send back the raw data from the database. But if you need additional metadata, you can return the actual snapshot. And AngularFire also has a way to return it in an n g r x redux friendly way, but I'll save that for a future video.
databases
data
data management
You get the snapshot by calling snapshot changes and then I'll show you what this looks like in the console just so you get an idea of what's actually contained in there. So if we look at the actual array, we can see we have a type, which is the type of event that occurred that could be added, modified, or removed.
And then we also have the old index, new index. We can retrieve the ID and some other metadata as well. So at this point, we've been working in the context of collections, but we can also retrieve individual documents. So to do that, we're going to make a reference to a document just like we did with the collection. The only difference now is it's an AngularFirestore document type, and it also has the value changes method that will return an observable. So just like we did before, we make a reference to the note document by calling a f s doc. And for this example, I'll just go ahead and copy and paste a random ID from the database. Then we will build the observable by calling value changes. Then I'll go ahead and update the HTML to display the data from this document. Then as expected, the data is displayed on the front end. The next thing I'll show you is how to perform write operations on the data. This works basically the same as it did in the previous versions of AngularFire. The only difference is we call these methods on the reference itself rather than on the observable.
programming
operations
documentation
data
databases
data management
I'm setting up this new content variable to represent the form input of a user. When the form is submitted, we call update on the document reference and pass it the new data.
You also have the option to use set or delete on the document reference. Then we can jump back to the HTML and collect the user's input with NG model and run the update method on a button click. If we go try it out, we can see our data gets updated in real time just like it would with the real time database.
databases
Let's go ahead and pull up the Firebase console side by side. You can see how both applications are subscribed to the same data. So we can update the data from our app or we can update the data from the Firebase console, and everything stays synced up in real time. At this point, I only have one last thing to show you, and that's how to set up offline data, which is extremely easy with AngularFire.
All we have to do is go back into the app module and add this enable persistence method on the import. And amazingly, that's all you have to do. Now you have offline data capabilities built into your app. So let me show you how this works. We'll go back to our app, and will turn off the Internet connection by going to the network and putting it in offline mode. Then we'll try to make an update on the data reference, which will still work in the app front end, so it's gonna look fine to the user, but we get this Internet not connected error in the console.
internet
telecommunications
networking
software
Then if we go back to the Firestore console, we'll see that the actual data is not updated on the back end. AngularFire is keeping track of the updates, and when the Internet comes back on, it's going to send them to Firebase and update the back end.
This is an awesome feature for progressive web apps where you can still have some interactivity even when the app is offline. Now that I've turned the Internet back on, we can go into the console, and we'll see that it does get the updated data after the Internet comes back online. That's it for my Firestore introduction. If this video helped you, please like and subscribe. And if you wanna learn how to build more awesome features with Firestore, were considered becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you soon.
internet
youtube
seasons
Just yesterday, Firebase launched an exciting new product called Firestore. Simultaneously, AngularFire was updated to version 5 which supports Firestore and brings in a whole bunch of other important changes. In this episode, I'm going to show you how to use the Firestore module in Angular as well as talk about the benefits that Firestore brings app developers. Then over the next couple weeks, I'm going to release a whole bunch of new videos showing you how to build real world features with Firestore. So make sure to subscribe if you're just finding me for the first time. Before we get to the code, let's first distinguish what Firestore is and how it relates to the existing real time database that's already in Firebase. Firestore is a NoSQL database that solves many of the limitations that developers have found with the real time database. In other words, it does pretty much everything the real time database does with a few extra features on top. The first advantage is being able to query nested data in a memory friendly way. In the real time database, you would have to load all of an object's nested data, which makes it hard to organize data properly. With Firestore, you can create a tree of documents that point to other documents or other collections of documents. This makes it easy to model data relationships and make queries that are shallow and memory friendly. Another major benefit is its query language, which we'll see later in the code, but it has a where statement that you can use to filter data by equality. For example, name equals the string of Jeff, or with range operators where the score is greater than 23. And it allows you to build indices where you can efficiently make these queries. Firestore will build an index for each individual property, then then you have the option to create your own based on multiple properties. Now that we know that, let's actually build something with Firestore. I built a new feature into our Firestarter demo app that uses Firestore on the back end, which you can check out in the link in the description. If you're brand new to AngularFire, you can follow the install instructions on the GitHub page. But I'm going to assume you have an existing Angular application and show you how to upgrade it to AngularFire 5. So first, you'll have to uninstall AngularFire 2 with NPM, then reinstall it, making sure that the version is 5 point o or greater. Then I should warn you that there are many breaking changes in version 5, so make sure to read through the docs carefully before you update an existing app. Then another minor change is you need to have a project ID listed in your Firebase config. Firestore won't work without it, so make sure to include that. In my case, it's in the environment ts file. From there, you'll need to add it tier app module. So we'll import the AngularFirestore module and then just add it to the import section. Then we'll go into the app component and import AngularFirestore as well as the AngularFire document and AngularFire collection. And from RXJS, we'll import observable and map. Firestore encourages the use of TypeScript. So we're going to create an interface called note, which will define our data structure, which is just going to be a content is a string and then hearts as a number. And we'll also give it an optional ID property. The first thing I wanna show you is how to work with collections which are just a list of documents. Is the real time database equivalent to a list. So first we make a reference to a collection and we do that by typing it as an AngularFire our collection with our note interface. Then we'll get our data back as an observable in a second variable, which we'll type as an array of notes. So that's one of the biggest changes in AngularFire 5. The reference to some data is decoupled from the actual observable data itself. We can make a reference to a collection by calling a f s collection and whatever collection we wanna receive, in this case, notes. So at this point, we just have a reference to the collection, we can get observable data back from it by calling value changes. This is roughly the equivalent to a Firebase list observable and previous versions of AngularFire. So we can loop over the data in the HTML by just calling n g 4 with the async pipe, then we can print it out to the screen as JSON. Then we get data back in the screen as expected. But I wanna point out that the data is not ordered in any specific way. You can see we have strings and numbers in different orders, but Firestore can help us out with that. You can pass a callback to the collection reference to take advantage of the Firestore query language. The first thing we'll do here is order by the content, which is a string value. Then we can get our notes back in alphabetical order based on the content. So now you can see they're ordered a, b, c, d. If we do the same thing for hearts, we'll get the hearts back in ascending order. So we have hearts 0667. If we wanna flip this around, we just pass the descending keyword, and we're good to go. Doing this kind of stuff was extremely difficult in the real time database, so this is a huge advantage if you're doing a lot of sorting and organizing of data. You can also limit the amount of results you get back by just calling limit just like you would in a regular SQL database. You also have a few other operators that will offset where you start from so you can do things like pagination and infinite scroll. I'll cover those in more detail in a future lesson. Right now, I wanna show you what happens if we try to combine 2 order by operators on 2 different properties. Initially, it's going to give us an error in the console. But what we'll see here is we have a link in this console to build an index for this query. If we copy and paste the link, it's going to take us to the Firebase console and give us the option to create this index. It takes a few minutes, but once you have the index back then you'll be able to make this query efficiently. If we go back to Angular then we see that this query is sorted by 2 different properties now. The next thing we're going to look at is the where statement. This allows us to make queries in a more expressive kind of way. For this query, we want notes where hearts are greater than or equal to 5. Then you can see on the front end we get the notes filtered by that rule. We can also filter by equality, so we can do hearts equal to 7, and then we should only get back the notes with that parameter. But I should mention you can't use the not equal operator. Attempting to use it will cause your app to crash, so just be aware of that. What you can do is use the equality operator to chain together with multiple where clauses. So we could say where hearts equals 6 and content equals triple a. An important caveat is that this only works with the equality operator. If you try to do this with a range operator you're going to get an error. So if we change equality to greater than and try to run it we're going to see an error in the front end. So that's how the query language works. Now I wanna show you a little bit more about how the observables work. In most cases, you should only need to call value changes which send back the raw data from the database. But if you need additional metadata, you can return the actual snapshot. And AngularFire also has a way to return it in an n g r x redux friendly way, but I'll save that for a future video. You get the snapshot by calling snapshot changes and then I'll show you what this looks like in the console just so you get an idea of what's actually contained in there. So if we look at the actual array, we can see we have a type, which is the type of event that occurred that could be added, modified, or removed. And then we also have the old index, new index. We can retrieve the ID and some other metadata as well. So at this point, we've been working in the context of collections, but we can also retrieve individual documents. So to do that, we're going to make a reference to a document just like we did with the collection. The only difference now is it's an AngularFirestore document type, and it also has the value changes method that will return an observable. So just like we did before, we make a reference to the note document by calling a f s doc. And for this example, I'll just go ahead and copy and paste a random ID from the database. Then we will build the observable by calling value changes. Then I'll go ahead and update the HTML to display the data from this document. Then as expected, the data is displayed on the front end. The next thing I'll show you is how to perform write operations on the data. This works basically the same as it did in the previous versions of AngularFire. The only difference is we call these methods on the reference itself rather than on the observable. I'm setting up this new content variable to represent the form input of a user. When the form is submitted, we call update on the document reference and pass it the new data. You also have the option to use set or delete on the document reference. Then we can jump back to the HTML and collect the user's input with NG model and run the update method on a button click. If we go try it out, we can see our data gets updated in real time just like it would with the real time database. Let's go ahead and pull up the Firebase console side by side. You can see how both applications are subscribed to the same data. So we can update the data from our app or we can update the data from the Firebase console, and everything stays synced up in real time. At this point, I only have one last thing to show you, and that's how to set up offline data, which is extremely easy with AngularFire. All we have to do is go back into the app module and add this enable persistence method on the import. And amazingly, that's all you have to do. Now you have offline data capabilities built into your app. So let me show you how this works. We'll go back to our app, and will turn off the Internet connection by going to the network and putting it in offline mode. Then we'll try to make an update on the data reference, which will still work in the app front end, so it's gonna look fine to the user, but we get this Internet not connected error in the console. Then if we go back to the Firestore console, we'll see that the actual data is not updated on the back end. AngularFire is keeping track of the updates, and when the Internet comes back on, it's going to send them to Firebase and update the back end. This is an awesome feature for progressive web apps where you can still have some interactivity even when the app is offline. Now that I've turned the Internet back on, we can go into the console, and we'll see that it does get the updated data after the Internet comes back online. That's it for my Firestore introduction. If this video helped you, please like and subscribe. And if you wanna learn how to build more awesome features with Firestore, were considered becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you soon.
Just
just
yesterday,
yesterday
Firebase
firebase
launched
launched
an
an
exciting
exciting
new
new
product
product
called
called
Firestore.
firestore
Simultaneously,
simultaneously
AngularFire
angularfire
was
was
updated
updated
to
to
version
version
5
5
which
which
supports
supports
Firestore
firestore
and
and
brings
brings
in
in
a
a
whole
whole
bunch
bunch
of
of
other
other
important
important
changes.
changes
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
use
use
the
the
Firestore
firestore
module
module
in
in
Angular
angular
as
as
well
well
as
as
talk
talk
about
about
the
the
benefits
benefits
that
that
Firestore
firestore
brings
brings
app
app
developers.
developers
Then
then
over
over
the
the
next
next
couple
couple
weeks,
weeks
I'm
i'm
going
going
to
to
release
release
a
a
whole
whole
bunch
bunch
of
of
new
new
videos
videos
showing
showing
you
you
how
how
to
to
build
build
real
real
world
world
features
features
with
with
Firestore.
firestore
So
so
make
make
sure
sure
to
to
subscribe
subscribe
if
if
you're
you're
just
just
finding
finding
me
me
for
for
the
the
first
first
time.
time
Before
before
we
we
get
get
to
to
the
the
code,
code
let's
let's
first
first
distinguish
distinguish
what
what
Firestore
firestore
is
is
and
and
how
how
it
it
relates
relates
to
to
the
the
existing
existing
real
real
time
time
database
database
that's
that's
already
already
in
in
Firebase.
firebase
Firestore
firestore
is
is
a
a
NoSQL
nosql
database
database
that
that
solves
solves
many
many
of
of
the
the
limitations
limitations
that
that
developers
developers
have
have
found
found
with
with
the
the
real
real
time
time
database.
database
In
in
other
other
words,
words
it
it
does
does
pretty
pretty
much
much
everything
everything
the
the
real
real
time
time
database
database
does
does
with
with
a
a
few
few
extra
extra
features
features
on
on
top.
top
The
the
first
first
advantage
advantage
is
is
being
being
able
able
to
to
query
query
nested
nested
data
data
in
in
a
a
memory
memory
friendly
friendly
way.
way
In
in
the
the
real
real
time
time
database,
database
you
you
would
would
have
have
to
to
load
load
all
all
of
of
an
an
object's
object's
nested
nested
data,
data
which
which
makes
makes
it
it
hard
hard
to
to
organize
organize
data
data
properly.
properly
With
with
Firestore,
firestore
you
you
can
can
create
create
a
a
tree
tree
of
of
documents
documents
that
that
point
point
to
to
other
other
documents
documents
or
or
other
other
collections
collections
of
of
documents.
documents
This
this
makes
makes
it
it
easy
easy
to
to
model
model
data
data
relationships
relationships
and
and
make
make
queries
queries
that
that
are
are
shallow
shallow
and
and
memory
memory
friendly.
friendly
Another
another
major
major
benefit
benefit
is
is
its
its
query
query
language,
language
which
which
we'll
we'll
see
see
later
later
in
in
the
the
code,
code
but
but
it
it
has
has
a
a
where
where
statement
statement
that
that
you
you
can
can
use
use
to
to
filter
filter
data
data
by
by
equality.
equality
For
for
example,
example
name
name
equals
equals
the
the
string
string
of
of
Jeff,
jeff
or
or
with
with
range
range
operators
operators
where
where
the
the
score
score
is
is
greater
greater
than
than
23.
23
And
and
it
it
allows
allows
you
you
to
to
build
build
indices
indices
where
where
you
you
can
can
efficiently
efficiently
make
make
these
these
queries.
queries
Firestore
firestore
will
will
build
build
an
an
index
index
for
for
each
each
individual
individual
property,
property
then
then
then
then
you
you
have
have
the
the
option
option
to
to
create
create
your
your
own
own
based
based
on
on
multiple
multiple
properties.
properties
Now
now
that
that
we
we
know
know
that,
that
let's
let's
actually
actually
build
build
something
something
with
with
Firestore.
firestore
I
i
built
built
a
a
new
new
feature
feature
into
into
our
our
Firestarter
firestarter
demo
demo
app
app
that
that
uses
uses
Firestore
firestore
on
on
the
the
back
back
end,
end
which
which
you
you
can
can
check
check
out
out
in
in
the
the
link
link
in
in
the
the
description.
description
If
if
you're
you're
brand
brand
new
new
to
to
AngularFire,
angularfire
you
you
can
can
follow
follow
the
the
install
install
instructions
instructions
on
on
the
the
GitHub
github
page.
page
But
but
I'm
i'm
going
going
to
to
assume
assume
you
you
have
have
an
an
existing
existing
Angular
angular
application
application
and
and
show
show
you
you
how
how
to
to
upgrade
upgrade
it
it
to
to
AngularFire
angularfire
5.
5
So
so
first,
first
you'll
you'll
have
have
to
to
uninstall
uninstall
AngularFire
angularfire
2
2
with
with
NPM,
npm
then
then
reinstall
reinstall
it,
it
making
making
sure
sure
that
that
the
the
version
version
is
is
5
5
point
point
o
o
or
or
greater.
greater
Then
then
I
i
should
should
warn
warn
you
you
that
that
there
there
are
are
many
many
breaking
breaking
changes
changes
in
in
version
version
5,
5
so
so
make
make
sure
sure
to
to
read
read
through
through
the
the
docs
docs
carefully
carefully
before
before
you
you
update
update
an
an
existing
existing
app.
app
Then
then
another
another
minor
minor
change
change
is
is
you
you
need
need
to
to
have
have
a
a
project
project
ID
id
listed
listed
in
in
your
your
Firebase
firebase
config.
config
Firestore
firestore
won't
won't
work
work
without
without
it,
it
so
so
make
make
sure
sure
to
to
include
include
that.
that
In
in
my
my
case,
case
it's
it's
in
in
the
the
environment
environment
ts
ts
file.
file
From
from
there,
there
you'll
you'll
need
need
to
to
add
add
it
it
tier
tier
app
app
module.
module
So
so
we'll
we'll
import
import
the
the
AngularFirestore
angularfirestore
module
module
and
and
then
then
just
just
add
add
it
it
to
to
the
the
import
import
section.
section
Then
then
we'll
we'll
go
go
into
into
the
the
app
app
component
component
and
and
import
import
AngularFirestore
angularfirestore
as
as
well
well
as
as
the
the
AngularFire
angularfire
document
document
and
and
AngularFire
angularfire
collection.
collection
And
and
from
from
RXJS,
rxjs
we'll
we'll
import
import
observable
observable
and
and
map.
map
Firestore
firestore
encourages
encourages
the
the
use
use
of
of
TypeScript.
typescript
So
so
we're
we're
going
going
to
to
create
create
an
an
interface
interface
called
called
note,
note
which
which
will
will
define
define
our
our
data
data
structure,
structure
which
which
is
is
just
just
going
going
to
to
be
be
a
a
content
content
is
is
a
a
string
string
and
and
then
then
hearts
hearts
as
as
a
a
number.
number
And
and
we'll
we'll
also
also
give
give
it
it
an
an
optional
optional
ID
id
property.
property
The
the
first
first
thing
thing
I
i
wanna
wanna
show
show
you
you
is
is
how
how
to
to
work
work
with
with
collections
collections
which
which
are
are
just
just
a
a
list
list
of
of
documents.
documents
Is
is
the
the
real
real
time
time
database
database
equivalent
equivalent
to
to
a
a
list.
list
So
so
first
first
we
we
make
make
a
a
reference
reference
to
to
a
a
collection
collection
and
and
we
we
do
do
that
that
by
by
typing
typing
it
it
as
as
an
an
AngularFire
angularfire
our
our
collection
collection
with
with
our
our
note
note
interface.
interface
Then
then
we'll
we'll
get
get
our
our
data
data
back
back
as
as
an
an
observable
observable
in
in
a
a
second
second
variable,
variable
which
which
we'll
we'll
type
type
as
as
an
an
array
array
of
of
notes.
notes
So
so
that's
that's
one
one
of
of
the
the
biggest
biggest
changes
changes
in
in
AngularFire
angularfire
5.
5
The
the
reference
reference
to
to
some
some
data
data
is
is
decoupled
decoupled
from
from
the
the
actual
actual
observable
observable
data
data
itself.
itself
We
we
can
can
make
make
a
a
reference
reference
to
to
a
a
collection
collection
by
by
calling
calling
a
a
f
f
s
s
collection
collection
and
and
whatever
whatever
collection
collection
we
we
wanna
wanna
receive,
receive
in
in
this
this
case,
case
notes.
notes
So
so
at
at
this
this
point,
point
we
we
just
just
have
have
a
a
reference
reference
to
to
the
the
collection,
collection
we
we
can
can
get
get
observable
observable
data
data
back
back
from
from
it
it
by
by
calling
calling
value
value
changes.
changes
This
this
is
is
roughly
roughly
the
the
equivalent
equivalent
to
to
a
a
Firebase
firebase
list
list
observable
observable
and
and
previous
previous
versions
versions
of
of
AngularFire.
angularfire
So
so
we
we
can
can
loop
loop
over
over
the
the
data
data
in
in
the
the
HTML
html
by
by
just
just
calling
calling
n
n
g
g
4
4
with
with
the
the
async
async
pipe,
pipe
then
then
we
we
can
can
print
print
it
it
out
out
to
to
the
the
screen
screen
as
as
JSON.
json
Then
then
we
we
get
get
data
data
back
back
in
in
the
the
screen
screen
as
as
expected.
expected
But
but
I
i
wanna
wanna
point
point
out
out
that
that
the
the
data
data
is
is
not
not
ordered
ordered
in
in
any
any
specific
specific
way.
way
You
you
can
can
see
see
we
we
have
have
strings
strings
and
and
numbers
numbers
in
in
different
different
orders,
orders
but
but
Firestore
firestore
can
can
help
help
us
us
out
out
with
with
that.
that
You
you
can
can
pass
pass
a
a
callback
callback
to
to
the
the
collection
collection
reference
reference
to
to
take
take
advantage
advantage
of
of
the
the
Firestore
firestore
query
query
language.
language
The
the
first
first
thing
thing
we'll
we'll
do
do
here
here
is
is
order
order
by
by
the
the
content,
content
which
which
is
is
a
a
string
string
value.
value
Then
then
we
we
can
can
get
get
our
our
notes
notes
back
back
in
in
alphabetical
alphabetical
order
order
based
based
on
on
the
the
content.
content
So
so
now
now
you
you
can
can
see
see
they're
they're
ordered
ordered
a,
a
b,
b
c,
c
d.
d
If
if
we
we
do
do
the
the
same
same
thing
thing
for
for
hearts,
hearts
we'll
we'll
get
get
the
the
hearts
hearts
back
back
in
in
ascending
ascending
order.
order
So
so
we
we
have
have
hearts
hearts
0667.
0667
If
if
we
we
wanna
wanna
flip
flip
this
this
around,
around
we
we
just
just
pass
pass
the
the
descending
descending
keyword,
keyword
and
and
we're
we're
good
good
to
to
go.
go
Doing
doing
this
this
kind
kind
of
of
stuff
stuff
was
was
extremely
extremely
difficult
difficult
in
in
the
the
real
real
time
time
database,
database
so
so
this
this
is
is
a
a
huge
huge
advantage
advantage
if
if
you're
you're
doing
doing
a
a
lot
lot
of
of
sorting
sorting
and
and
organizing
organizing
of
of
data.
data
You
you
can
can
also
also
limit
limit
the
the
amount
amount
of
of
results
results
you
you
get
get
back
back
by
by
just
just
calling
calling
limit
limit
just
just
like
like
you
you
would
would
in
in
a
a
regular
regular
SQL
sql
database.
database
You
you
also
also
have
have
a
a
few
few
other
other
operators
operators
that
that
will
will
offset
offset
where
where
you
you
start
start
from
from
so
so
you
you
can
can
do
do
things
things
like
like
pagination
pagination
and
and
infinite
infinite
scroll.
scroll
I'll
i'll
cover
cover
those
those
in
in
more
more
detail
detail
in
in
a
a
future
future
lesson.
lesson
Right
right
now,
now
I
i
wanna
wanna
show
show
you
you
what
what
happens
happens
if
if
we
we
try
try
to
to
combine
combine
2
2
order
order
by
by
operators
operators
on
on
2
2
different
different
properties.
properties
Initially,
initially
it's
it's
going
going
to
to
give
give
us
us
an
an
error
error
in
in
the
the
console.
console
But
but
what
what
we'll
we'll
see
see
here
here
is
is
we
we
have
have
a
a
link
link
in
in
this
this
console
console
to
to
build
build
an
an
index
index
for
for
this
this
query.
query
If
if
we
we
copy
copy
and
and
paste
paste
the
the
link,
link
it's
it's
going
going
to
to
take
take
us
us
to
to
the
the
Firebase
firebase
console
console
and
and
give
give
us
us
the
the
option
option
to
to
create
create
this
this
index.
index
It
it
takes
takes
a
a
few
few
minutes,
minutes
but
but
once
once
you
you
have
have
the
the
index
index
back
back
then
then
you'll
you'll
be
be
able
able
to
to
make
make
this
this
query
query
efficiently.
efficiently
If
if
we
we
go
go
back
back
to
to
Angular
angular
then
then
we
we
see
see
that
that
this
this
query
query
is
is
sorted
sorted
by
by
2
2
different
different
properties
properties
now.
now
The
the
next
next
thing
thing
we're
we're
going
going
to
to
look
look
at
at
is
is
the
the
where
where
statement.
statement
This
this
allows
allows
us
us
to
to
make
make
queries
queries
in
in
a
a
more
more
expressive
expressive
kind
kind
of
of
way.
way
For
for
this
this
query,
query
we
we
want
want
notes
notes
where
where
hearts
hearts
are
are
greater
greater
than
than
or
or
equal
equal
to
to
5.
5
Then
then
you
you
can
can
see
see
on
on
the
the
front
front
end
end
we
we
get
get
the
the
notes
notes
filtered
filtered
by
by
that
that
rule.
rule
We
we
can
can
also
also
filter
filter
by
by
equality,
equality
so
so
we
we
can
can
do
do
hearts
hearts
equal
equal
to
to
7,
7
and
and
then
then
we
we
should
should
only
only
get
get
back
back
the
the
notes
notes
with
with
that
that
parameter.
parameter
But
but
I
i
should
should
mention
mention
you
you
can't
can't
use
use
the
the
not
not
equal
equal
operator.
operator
Attempting
attempting
to
to
use
use
it
it
will
will
cause
cause
your
your
app
app
to
to
crash,
crash
so
so
just
just
be
be
aware
aware
of
of
that.
that
What
what
you
you
can
can
do
do
is
is
use
use
the
the
equality
equality
operator
operator
to
to
chain
chain
together
together
with
with
multiple
multiple
where
where
clauses.
clauses
So
so
we
we
could
could
say
say
where
where
hearts
hearts
equals
equals
6
6
and
and
content
content
equals
equals
triple
triple
a.
a
An
an
important
important
caveat
caveat
is
is
that
that
this
this
only
only
works
works
with
with
the
the
equality
equality
operator.
operator
If
if
you
you
try
try
to
to
do
do
this
this
with
with
a
a
range
range
operator
operator
you're
you're
going
going
to
to
get
get
an
an
error.
error
So
so
if
if
we
we
change
change
equality
equality
to
to
greater
greater
than
than
and
and
try
try
to
to
run
run
it
it
we're
we're
going
going
to
to
see
see
an
an
error
error
in
in
the
the
front
front
end.
end
So
so
that's
that's
how
how
the
the
query
query
language
language
works.
works
Now
now
I
i
wanna
wanna
show
show
you
you
a
a
little
little
bit
bit
more
more
about
about
how
how
the
the
observables
observables
work.
work
In
in
most
most
cases,
cases
you
you
should
should
only
only
need
need
to
to
call
call
value
value
changes
changes
which
which
send
send
back
back
the
the
raw
raw
data
data
from
from
the
the
database.
database
But
but
if
if
you
you
need
need
additional
additional
metadata,
metadata
you
you
can
can
return
return
the
the
actual
actual
snapshot.
snapshot
And
and
AngularFire
angularfire
also
also
has
has
a
a
way
way
to
to
return
return
it
it
in
in
an
an
n
n
g
g
r
r
x
x
redux
redux
friendly
friendly
way,
way
but
but
I'll
i'll
save
save
that
that
for
for
a
a
future
future
video.
video
You
you
get
get
the
the
snapshot
snapshot
by
by
calling
calling
snapshot
snapshot
changes
changes
and
and
then
then
I'll
i'll
show
show
you
you
what
what
this
this
looks
looks
like
like
in
in
the
the
console
console
just
just
so
so
you
you
get
get
an
an
idea
idea
of
of
what's
what's
actually
actually
contained
contained
in
in
there.
there
So
so
if
if
we
we
look
look
at
at
the
the
actual
actual
array,
array
we
we
can
can
see
see
we
we
have
have
a
a
type,
type
which
which
is
is
the
the
type
type
of
of
event
event
that
that
occurred
occurred
that
that
could
could
be
be
added,
added
modified,
modified
or
or
removed.
removed
And
and
then
then
we
we
also
also
have
have
the
the
old
old
index,
index
new
new
index.
index
We
we
can
can
retrieve
retrieve
the
the
ID
id
and
and
some
some
other
other
metadata
metadata
as
as
well.
well
So
so
at
at
this
this
point,
point
we've
we've
been
been
working
working
in
in
the
the
context
context
of
of
collections,
collections
but
but
we
we
can
can
also
also
retrieve
retrieve
individual
individual
documents.
documents
So
so
to
to
do
do
that,
that
we're
we're
going
going
to
to
make
make
a
a
reference
reference
to
to
a
a
document
document
just
just
like
like
we
we
did
did
with
with
the
the
collection.
collection
The
the
only
only
difference
difference
now
now
is
is
it's
it's
an
an
AngularFirestore
angularfirestore
document
document
type,
type
and
and
it
it
also
also
has
has
the
the
value
value
changes
changes
method
method
that
that
will
will
return
return
an
an
observable.
observable
So
so
just
just
like
like
we
we
did
did
before,
before
we
we
make
make
a
a
reference
reference
to
to
the
the
note
note
document
document
by
by
calling
calling
a
a
f
f
s
s
doc.
doc
And
and
for
for
this
this
example,
example
I'll
i'll
just
just
go
go
ahead
ahead
and
and
copy
copy
and
and
paste
paste
a
a
random
random
ID
id
from
from
the
the
database.
database
Then
then
we
we
will
will
build
build
the
the
observable
observable
by
by
calling
calling
value
value
changes.
changes
Then
then
I'll
i'll
go
go
ahead
ahead
and
and
update
update
the
the
HTML
html
to
to
display
display
the
the
data
data
from
from
this
this
document.
document
Then
then
as
as
expected,
expected
the
the
data
data
is
is
displayed
displayed
on
on
the
the
front
front
end.
end
The
the
next
next
thing
thing
I'll
i'll
show
show
you
you
is
is
how
how
to
to
perform
perform
write
write
operations
operations
on
on
the
the
data.
data
This
this
works
works
basically
basically
the
the
same
same
as
as
it
it
did
did
in
in
the
the
previous
previous
versions
versions
of
of
AngularFire.
angularfire
The
the
only
only
difference
difference
is
is
we
we
call
call
these
these
methods
methods
on
on
the
the
reference
reference
itself
itself
rather
rather
than
than
on
on
the
the
observable.
observable
I'm
i'm
setting
setting
up
up
this
this
new
new
content
content
variable
variable
to
to
represent
represent
the
the
form
form
input
input
of
of
a
a
user.
user
When
when
the
the
form
form
is
is
submitted,
submitted
we
we
call
call
update
update
on
on
the
the
document
document
reference
reference
and
and
pass
pass
it
it
the
the
new
new
data.
data
You
you
also
also
have
have
the
the
option
option
to
to
use
use
set
set
or
or
delete
delete
on
on
the
the
document
document
reference.
reference
Then
then
we
we
can
can
jump
jump
back
back
to
to
the
the
HTML
html
and
and
collect
collect
the
the
user's
user's
input
input
with
with
NG
ng
model
model
and
and
run
run
the
the
update
update
method
method
on
on
a
a
button
button
click.
click
If
if
we
we
go
go
try
try
it
it
out,
out
we
we
can
can
see
see
our
our
data
data
gets
gets
updated
updated
in
in
real
real
time
time
just
just
like
like
it
it
would
would
with
with
the
the
real
real
time
time
database.
database
Let's
let's
go
go
ahead
ahead
and
and
pull
pull
up
up
the
the
Firebase
firebase
console
console
side
side
by
by
side.
side
You
you
can
can
see
see
how
how
both
both
applications
applications
are
are
subscribed
subscribed
to
to
the
the
same
same
data.
data
So
so
we
we
can
can
update
update
the
the
data
data
from
from
our
our
app
app
or
or
we
we
can
can
update
update
the
the
data
data
from
from
the
the
Firebase
firebase
console,
console
and
and
everything
everything
stays
stays
synced
synced
up
up
in
in
real
real
time.
time
At
at
this
this
point,
point
I
i
only
only
have
have
one
one
last
last
thing
thing
to
to
show
show
you,
you
and
and
that's
that's
how
how
to
to
set
set
up
up
offline
offline
data,
data
which
which
is
is
extremely
extremely
easy
easy
with
with
AngularFire.
angularfire
All
all
we
we
have
have
to
to
do
do
is
is
go
go
back
back
into
into
the
the
app
app
module
module
and
and
add
add
this
this
enable
enable
persistence
persistence
method
method
on
on
the
the
import.
import
And
and
amazingly,
amazingly
that's
that's
all
all
you
you
have
have
to
to
do.
do
Now
now
you
you
have
have
offline
offline
data
data
capabilities
capabilities
built
built
into
into
your
your
app.
app
So
so
let
let
me
me
show
show
you
you
how
how
this
this
works.
works
We'll
we'll
go
go
back
back
to
to
our
our
app,
app
and
and
will
will
turn
turn
off
off
the
the
Internet
internet
connection
connection
by
by
going
going
to
to
the
the
network
network
and
and
putting
putting
it
it
in
in
offline
offline
mode.
mode
Then
then
we'll
we'll
try
try
to
to
make
make
an
an
update
update
on
on
the
the
data
data
reference,
reference
which
which
will
will
still
still
work
work
in
in
the
the
app
app
front
front
end,
end
so
so
it's
it's
gonna
gonna
look
look
fine
fine
to
to
the
the
user,
user
but
but
we
we
get
get
this
this
Internet
internet
not
not
connected
connected
error
error
in
in
the
the
console.
console
Then
then
if
if
we
we
go
go
back
back
to
to
the
the
Firestore
firestore
console,
console
we'll
we'll
see
see
that
that
the
the
actual
actual
data
data
is
is
not
not
updated
updated
on
on
the
the
back
back
end.
end
AngularFire
angularfire
is
is
keeping
keeping
track
track
of
of
the
the
updates,
updates
and
and
when
when
the
the
Internet
internet
comes
comes
back
back
on,
on
it's
it's
going
going
to
to
send
send
them
them
to
to
Firebase
firebase
and
and
update
update
the
the
back
back
end.
end
This
this
is
is
an
an
awesome
awesome
feature
feature
for
for
progressive
progressive
web
web
apps
apps
where
where
you
you
can
can
still
still
have
have
some
some
interactivity
interactivity
even
even
when
when
the
the
app
app
is
is
offline.
offline
Now
now
that
that
I've
i've
turned
turned
the
the
Internet
internet
back
back
on,
on
we
we
can
can
go
go
into
into
the
the
console,
console
and
and
we'll
we'll
see
see
that
that
it
it
does
does
get
get
the
the
updated
updated
data
data
after
after
the
the
Internet
internet
comes
comes
back
back
online.
online
That's
that's
it
it
for
for
my
my
Firestore
firestore
introduction.
introduction
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
learn
learn
how
how
to
to
build
build
more
more
awesome
awesome
features
features
with
with
Firestore,
firestore
were
were
considered
considered
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
Speaker 0 explains how to use the FirAGG module in Angular for reducing data organization and making queries shallow and memory-friendly. They also discuss the query language and how it allows for efficient model building and filtering. The speaker then explains how to import AngularFirGeneration, AngularFinancial, and Angularff in the app component, how to use the where statement to combine the order by operators and the variables in the console, how to retrieve the reference to the note and the variables in the console, and how to set up offline data. They also show how to set up offline data and mention a feature for building more features with Fir analysis.
Firestore with AngularFire5 Quick Start Tutorial
Just yesterday, Firebase launched an exciting new product called Firestore. Simultaneously, AngularFire was updated to version 5 which supports Firestore and brings in a whole bunch of other important changes. In this episode, I'm going to show you how to use the Firestore module in Angular as well as talk about the benefits that Firestore brings app developers. Then over the next couple weeks, I'm going to release a whole bunch of new videos showing you how to build real world features with Firestore. So make sure to subscribe if you're just finding me for the first time. Before we get to the code, let's first distinguish what Firestore is and how it relates to the existing real time database that's already in Firebase. Firestore is a NoSQL database that solves many of the limitations that developers have found with the real time database. In other words, it does pretty much everything the real time database does with a few extra features on top. The first advantage is being able to query nested data in a memory friendly way. In the real time database, you would have to load all of an object's nested data, which makes it hard to organize data properly. With Firestore, you can create a tree of documents that point to other documents or other collections of documents. This makes it easy to model data relationships and make queries that are shallow and memory friendly. Another major benefit is its query language, which we'll see later in the code, but it has a where statement that you can use to filter data by equality. For example, name equals the string of Jeff, or with range operators where the score is greater than 23. And it allows you to build indices where you can efficiently make these queries. Firestore will build an index for each individual property, then then you have the option to create your own based on multiple properties. Now that we know that, let's actually build something with Firestore. I built a new feature into our Firestarter demo app that uses Firestore on the back end, which you can check out in the link in the description. If you're brand new to AngularFire, you can follow the install instructions on the GitHub page. But I'm going to assume you have an existing Angular application and show you how to upgrade it to AngularFire 5. So first, you'll have to uninstall AngularFire 2 with NPM, then reinstall it, making sure that the version is 5 point o or greater. Then I should warn you that there are many breaking changes in version 5, so make sure to read through the docs carefully before you update an existing app. Then another minor change is you need to have a project ID listed in your Firebase config. Firestore won't work without it, so make sure to include that. In my case, it's in the environment ts file. From there, you'll need to add it tier app module. So we'll import the AngularFirestore module and then just add it to the import section. Then we'll go into the app component and import AngularFirestore as well as the AngularFire document and AngularFire collection. And from RXJS, we'll import observable and map. Firestore encourages the use of TypeScript. So we're going to create an interface called note, which will define our data structure, which is just going to be a content is a string and then hearts as a number. And we'll also give it an optional ID property. The first thing I wanna show you is how to work with collections which are just a list of documents. Is the real time database equivalent to a list. So first we make a reference to a collection and we do that by typing it as an AngularFire our collection with our note interface. Then we'll get our data back as an observable in a second variable, which we'll type as an array of notes. So that's one of the biggest changes in AngularFire 5. The reference to some data is decoupled from the actual observable data itself. We can make a reference to a collection by calling a f s collection and whatever collection we wanna receive, in this case, notes. So at this point, we just have a reference to the collection, we can get observable data back from it by calling value changes. This is roughly the equivalent to a Firebase list observable and previous versions of AngularFire. So we can loop over the data in the HTML by just calling n g 4 with the async pipe, then we can print it out to the screen as JSON. Then we get data back in the screen as expected. But I wanna point out that the data is not ordered in any specific way. You can see we have strings and numbers in different orders, but Firestore can help us out with that. You can pass a callback to the collection reference to take advantage of the Firestore query language. The first thing we'll do here is order by the content, which is a string value. Then we can get our notes back in alphabetical order based on the content. So now you can see they're ordered a, b, c, d. If we do the same thing for hearts, we'll get the hearts back in ascending order. So we have hearts 0667. If we wanna flip this around, we just pass the descending keyword, and we're good to go. Doing this kind of stuff was extremely difficult in the real time database, so this is a huge advantage if you're doing a lot of sorting and organizing of data. You can also limit the amount of results you get back by just calling limit just like you would in a regular SQL database. You also have a few other operators that will offset where you start from so you can do things like pagination and infinite scroll. I'll cover those in more detail in a future lesson. Right now, I wanna show you what happens if we try to combine 2 order by operators on 2 different properties. Initially, it's going to give us an error in the console. But what we'll see here is we have a link in this console to build an index for this query. If we copy and paste the link, it's going to take us to the Firebase console and give us the option to create this index. It takes a few minutes, but once you have the index back then you'll be able to make this query efficiently. If we go back to Angular then we see that this query is sorted by 2 different properties now. The next thing we're going to look at is the where statement. This allows us to make queries in a more expressive kind of way. For this query, we want notes where hearts are greater than or equal to 5. Then you can see on the front end we get the notes filtered by that rule. We can also filter by equality, so we can do hearts equal to 7, and then we should only get back the notes with that parameter. But I should mention you can't use the not equal operator. Attempting to use it will cause your app to crash, so just be aware of that. What you can do is use the equality operator to chain together with multiple where clauses. So we could say where hearts equals 6 and content equals triple a. An important caveat is that this only works with the equality operator. If you try to do this with a range operator you're going to get an error. So if we change equality to greater than and try to run it we're going to see an error in the front end. So that's how the query language works. Now I wanna show you a little bit more about how the observables work. In most cases, you should only need to call value changes which send back the raw data from the database. But if you need additional metadata, you can return the actual snapshot. And AngularFire also has a way to return it in an n g r x redux friendly way, but I'll save that for a future video. You get the snapshot by calling snapshot changes and then I'll show you what this looks like in the console just so you get an idea of what's actually contained in there. So if we look at the actual array, we can see we have a type, which is the type of event that occurred that could be added, modified, or removed. And then we also have the old index, new index. We can retrieve the ID and some other metadata as well. So at this point, we've been working in the context of collections, but we can also retrieve individual documents. So to do that, we're going to make a reference to a document just like we did with the collection. The only difference now is it's an AngularFirestore document type, and it also has the value changes method that will return an observable. So just like we did before, we make a reference to the note document by calling a f s doc. And for this example, I'll just go ahead and copy and paste a random ID from the database. Then we will build the observable by calling value changes. Then I'll go ahead and update the HTML to display the data from this document. Then as expected, the data is displayed on the front end. The next thing I'll show you is how to perform write operations on the data. This works basically the same as it did in the previous versions of AngularFire. The only difference is we call these methods on the reference itself rather than on the observable. I'm setting up this new content variable to represent the form input of a user. When the form is submitted, we call update on the document reference and pass it the new data. You also have the option to use set or delete on the document reference. Then we can jump back to the HTML and collect the user's input with NG model and run the update method on a button click. If we go try it out, we can see our data gets updated in real time just like it would with the real time database. Let's go ahead and pull up the Firebase console side by side. You can see how both applications are subscribed to the same data. So we can update the data from our app or we can update the data from the Firebase console, and everything stays synced up in real time. At this point, I only have one last thing to show you, and that's how to set up offline data, which is extremely easy with AngularFire. All we have to do is go back into the app module and add this enable persistence method on the import. And amazingly, that's all you have to do. Now you have offline data capabilities built into your app. So let me show you how this works. We'll go back to our app, and will turn off the Internet connection by going to the network and putting it in offline mode. Then we'll try to make an update on the data reference, which will still work in the app front end, so it's gonna look fine to the user, but we get this Internet not connected error in the console. Then if we go back to the Firestore console, we'll see that the actual data is not updated on the back end. AngularFire is keeping track of the updates, and when the Internet comes back on, it's going to send them to Firebase and update the back end. This is an awesome feature for progressive web apps where you can still have some interactivity even when the app is offline. Now that I've turned the Internet back on, we can go into the console, and we'll see that it does get the updated data after the Internet comes back online. That's it for my Firestore introduction. If this video helped you, please like and subscribe. And if you wanna learn how to build more awesome features with Firestore, were considered becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you soon.
Speaker 0 explains how to use the FirAGG module in Angular for reducing data organization and making queries shallow and memory-friendly. They also discuss the query language and how it allows for efficient model building and filtering. The speaker then explains how to import AngularFirGeneration, AngularFinancial, and Angularff in the app component, how to use the where statement to combine the order by operators and the variables in the console, how to retrieve the reference to the note and the variables in the console, and how to set up offline data. They also show how to set up offline data and mention a feature for building more features with Fir analysis.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Firestore with AngularFire5 Quick Start Tutorial 
        and a small summary : Speaker 0 explains how to use the FirAGG module in Angular for reducing data organization and making queries shallow and memory-friendly. They also discuss the query language and how it allows for efficient model building and filtering. The speaker then explains how to import AngularFirGeneration, AngularFinancial, and Angularff in the app component, how to use the where statement to combine the order by operators and the variables in the console, how to retrieve the reference to the note and the variables in the console, and how to set up offline data. They also show how to set up offline data and mention a feature for building more features with Fir analysis.
        [/INST]
        
        Generate the video : Just yesterday, Firebase launched an exciting new product called Firestore. Simultaneously, AngularFire was updated to version 5 which supports Firestore and brings in a whole bunch of other important changes. In this episode, I'm going to show you how to use the Firestore module in Angular as well as talk about the benefits that Firestore brings app developers. Then over the next couple weeks, I'm going to release a whole bunch of new videos showing you how to build real world features with Firestore. So make sure to subscribe if you're just finding me for the first time. Before we get to the code, let's first distinguish what Firestore is and how it relates to the existing real time database that's already in Firebase. Firestore is a NoSQL database that solves many of the limitations that developers have found with the real time database. In other words, it does pretty much everything the real time database does with a few extra features on top. The first advantage is being able to query nested data in a memory friendly way. In the real time database, you would have to load all of an object's nested data, which makes it hard to organize data properly. With Firestore, you can create a tree of documents that point to other documents or other collections of documents. This makes it easy to model data relationships and make queries that are shallow and memory friendly. Another major benefit is its query language, which we'll see later in the code, but it has a where statement that you can use to filter data by equality. For example, name equals the string of Jeff, or with range operators where the score is greater than 23. And it allows you to build indices where you can efficiently make these queries. Firestore will build an index for each individual property, then then you have the option to create your own based on multiple properties. Now that we know that, let's actually build something with Firestore. I built a new feature into our Firestarter demo app that uses Firestore on the back end, which you can check out in the link in the description. If you're brand new to AngularFire, you can follow the install instructions on the GitHub page. But I'm going to assume you have an existing Angular application and show you how to upgrade it to AngularFire 5. So first, you'll have to uninstall AngularFire 2 with NPM, then reinstall it, making sure that the version is 5 point o or greater. Then I should warn you that there are many breaking changes in version 5, so make sure to read through the docs carefully before you update an existing app. Then another minor change is you need to have a project ID listed in your Firebase config. Firestore won't work without it, so make sure to include that. In my case, it's in the environment ts file. From there, you'll need to add it tier app module. So we'll import the AngularFirestore module and then just add it to the import section. Then we'll go into the app component and import AngularFirestore as well as the AngularFire document and AngularFire collection. And from RXJS, we'll import observable and map. Firestore encourages the use of TypeScript. So we're going to create an interface called note, which will define our data structure, which is just going to be a content is a string and then hearts as a number. And we'll also give it an optional ID property. The first thing I wanna show you is how to work with collections which are just a list of documents. Is the real time database equivalent to a list. So first we make a reference to a collection and we do that by typing it as an AngularFire our collection with our note interface. Then we'll get our data back as an observable in a second variable, which we'll type as an array of notes. So that's one of the biggest changes in AngularFire 5. The reference to some data is decoupled from the actual observable data itself. We can make a reference to a collection by calling a f s collection and whatever collection we wanna receive, in this case, notes. So at this point, we just have a reference to the collection, we can get observable data back from it by calling value changes. This is roughly the equivalent to a Firebase list observable and previous versions of AngularFire. So we can loop over the data in the HTML by just calling n g 4 with the async pipe, then we can print it out to the screen as JSON. Then we get data back in the screen as expected. But I wanna point out that the data is not ordered in any specific way. You can see we have strings and numbers in different orders, but Firestore can help us out with that. You can pass a callback to the collection reference to take advantage of the Firestore query language. The first thing we'll do here is order by the content, which is a string value. Then we can get our notes back in alphabetical order based on the content. So now you can see they're ordered a, b, c, d. If we do the same thing for hearts, we'll get the hearts back in ascending order. So we have hearts 0667. If we wanna flip this around, we just pass the descending keyword, and we're good to go. Doing this kind of stuff was extremely difficult in the real time database, so this is a huge advantage if you're doing a lot of sorting and organizing of data. You can also limit the amount of results you get back by just calling limit just like you would in a regular SQL database. You also have a few other operators that will offset where you start from so you can do things like pagination and infinite scroll. I'll cover those in more detail in a future lesson. Right now, I wanna show you what happens if we try to combine 2 order by operators on 2 different properties. Initially, it's going to give us an error in the console. But what we'll see here is we have a link in this console to build an index for this query. If we copy and paste the link, it's going to take us to the Firebase console and give us the option to create this index. It takes a few minutes, but once you have the index back then you'll be able to make this query efficiently. If we go back to Angular then we see that this query is sorted by 2 different properties now. The next thing we're going to look at is the where statement. This allows us to make queries in a more expressive kind of way. For this query, we want notes where hearts are greater than or equal to 5. Then you can see on the front end we get the notes filtered by that rule. We can also filter by equality, so we can do hearts equal to 7, and then we should only get back the notes with that parameter. But I should mention you can't use the not equal operator. Attempting to use it will cause your app to crash, so just be aware of that. What you can do is use the equality operator to chain together with multiple where clauses. So we could say where hearts equals 6 and content equals triple a. An important caveat is that this only works with the equality operator. If you try to do this with a range operator you're going to get an error. So if we change equality to greater than and try to run it we're going to see an error in the front end. So that's how the query language works. Now I wanna show you a little bit more about how the observables work. In most cases, you should only need to call value changes which send back the raw data from the database. But if you need additional metadata, you can return the actual snapshot. And AngularFire also has a way to return it in an n g r x redux friendly way, but I'll save that for a future video. You get the snapshot by calling snapshot changes and then I'll show you what this looks like in the console just so you get an idea of what's actually contained in there. So if we look at the actual array, we can see we have a type, which is the type of event that occurred that could be added, modified, or removed. And then we also have the old index, new index. We can retrieve the ID and some other metadata as well. So at this point, we've been working in the context of collections, but we can also retrieve individual documents. So to do that, we're going to make a reference to a document just like we did with the collection. The only difference now is it's an AngularFirestore document type, and it also has the value changes method that will return an observable. So just like we did before, we make a reference to the note document by calling a f s doc. And for this example, I'll just go ahead and copy and paste a random ID from the database. Then we will build the observable by calling value changes. Then I'll go ahead and update the HTML to display the data from this document. Then as expected, the data is displayed on the front end. The next thing I'll show you is how to perform write operations on the data. This works basically the same as it did in the previous versions of AngularFire. The only difference is we call these methods on the reference itself rather than on the observable. I'm setting up this new content variable to represent the form input of a user. When the form is submitted, we call update on the document reference and pass it the new data. You also have the option to use set or delete on the document reference. Then we can jump back to the HTML and collect the user's input with NG model and run the update method on a button click. If we go try it out, we can see our data gets updated in real time just like it would with the real time database. Let's go ahead and pull up the Firebase console side by side. You can see how both applications are subscribed to the same data. So we can update the data from our app or we can update the data from the Firebase console, and everything stays synced up in real time. At this point, I only have one last thing to show you, and that's how to set up offline data, which is extremely easy with AngularFire. All we have to do is go back into the app module and add this enable persistence method on the import. And amazingly, that's all you have to do. Now you have offline data capabilities built into your app. So let me show you how this works. We'll go back to our app, and will turn off the Internet connection by going to the network and putting it in offline mode. Then we'll try to make an update on the data reference, which will still work in the app front end, so it's gonna look fine to the user, but we get this Internet not connected error in the console. Then if we go back to the Firestore console, we'll see that the actual data is not updated on the back end. AngularFire is keeping track of the updates, and when the Internet comes back on, it's going to send them to Firebase and update the back end. This is an awesome feature for progressive web apps where you can still have some interactivity even when the app is offline. Now that I've turned the Internet back on, we can go into the console, and we'll see that it does get the updated data after the Internet comes back online. That's it for my Firestore introduction. If this video helped you, please like and subscribe. And if you wanna learn how to build more awesome features with Firestore, were considered becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you soon.
        