Angular with Google FireBase
First, I used angular CLI to generate a brand new app with all the boilerplate code.
ng new my-sample-app
After that, since I knew I was going to use Firebase for the backend, I installed the angular/fire library.
ng add @angular/fire
Since I needed to talk to the Firestore, I generated a service class as well.
ng g s crud
After that, I imported two modules from the angular fire in the app module to start with a bare minimum service where I can connect the Firestore database to the app.
This allowed me to import AngularFireStore to my service component where I set it up to a private database variable.
In the constructor of the service class, I used the imported AngularFireStore.
Now I was ready to use the ‘db’ variable to connect to my database which didn't exist yet. So, I went to google firebase and created a new project, and grabbed the firebaseConfig for the web.
This config needed to be added to the environment.ts file located in the environment folder at the root of the project structure. Just a side note here: do not use the same config for the production environment.
I was ready to utilize the initalizeApp method provided by angularFireModule. For that, I had to import the environment to the app module and then pass the environment.firebaseConfig to the initalizeApp function.
and in the imports array of the app.module.ts:
That is pretty much it. Now we are ready to connect to the database and add data and read data. I will show you a basic read query, where I use a function in the crud.service.ts to query the Firestore database and retrieve a collection named ‘users’ to get all the users in that collection and log it to the console:
That’s pretty much what I did to get the ball rolling. Thank you for reading and I hope my experience helps someone. Any feedback and suggestions would be really appreciated.