In this lecture, we are going to begin storing the user's data in the database.
Similar to before, Firebase offers a service for directly communicating with the database.
We can inject this service into our component for performing various actions before we can inject the
service.
We need to import a module.
Open the app module file.
Each service from Firebase has a module we imported the angular fire authentication module for interacting
with the authentication service.
We can add support for fire store by importing the respective module at the top of the file.
Import a module called Angular Firestorm module from the angular flash fire slash compat slash fire
store package.
Next, we will add this module to the imports option.
The module will expose services to our components.
They're accessible in every component.
Let's inject a service for interacting with our database.
Open the register component class file.
At the top of the file, we will import a service called Angular Fire Store.
Next, we will inject the service into the component inside the constructor function, create a private
property called DB.
The type for this property will be the angular fire store service.
Finally, we can update our register function.
The first step for using a collection is to create a collection below the create user function in the
try block.
We will replace the long statement with the this Dot DB Dot Collection function.
The collection function allows us to select a collection from our database.
However, we haven't created the collection yet.
Luckily, we don't have to do the collection.
Function will create a collection if the collection doesn't exist in our database.
It has one argument, which is the name of the collection to select the name of our collection will
be called users.
This function will return an object with methods and properties for working with the user's collection
after selecting a collection.
We can push a document chain, a function called Add.
The ad function will add a document to the collection.
A document is the terminology used to describe an object inside a collection.
The ad function has one argument, which is the object to insert or going to pass in an object with
the user data.
We are not going to add every field from our form.
We don't want to insert the password and confirm password properties to the database.
The password is already being stored in the authentication service.
We can limit these fields.
Let's add the name, email, age and phone number of properties to the object.
The ad function will return a promise we're going to use the async await syntax to make our code readable.
Add the await keyword before the function call.
We don't need to handle the air from this request because the request is being made inside the try catch
block.
The catch block will automatically handle errors from this request.
We're finished by using the add function.
We're able to insert additional information into the database.
It's data we can't typically store in the authentication service.
However, we are storing the email even though the authentication service already stores it.
It's still handy to store it in the database.
This will allow us to filter and sort through the data by email.
Let's try testing if this works.
Switch over to the browser.
Make sure your developer tools are opened.
We want to check for errors in the console or related to the register component after verifying there
aren't errors in the console, fill out the registration form with valid values.
After submitting the form, we will receive a success message despite receiving confirmation from our
app.
We should verify the user is being inserted into Firebase through the console in the Firebase console,
navigate to the database page.
If you already had it opened, you should be able to find the collection, Firebase refreshes this page
periodically.
If not, try manually refreshing.
The page in the database will find three new columns on the left.
We have a list of collections before submitting the request.
There were no collections.
By adding a document to the collection, Firebase will check if the collection exists.
If it doesn't, it'll create it for you.
We're allowed to skip this step in the process in the middle column.
We have a list of documents in the collection documents, so the objects in a collection in the right
column will find the data stored in a specific document.
You can click on any of the documents to view its data.
This collection is where we'll find the form data we submitted.
All our data is present and accounted for.
Looking closer, the name of the document is a random string.
The random string is a generated unique ID for our data.
This is important to understand databases need a way to track individual records.
This behavior will allow us to pull a specific record or user from our database.
We could have provided an ID ourselves, but Firebase will create one for you if you don't provide one.
We're going to let Firebase take care of assigning IDs for us in the next set of lectures.
We are going to refine our solution for the best developer experience.