How to connect an Angular 12 app to Firebase

Start by creating a new Angular 12 project and serving it up on localhost. When you run the ng new my-app command choose to add Angular routing, and choose SCSS for the styling.

The welcome page will open in your browser and should look something like this:

Now create an account with Google Firebase and log into the Firebase console here https://console.firebase.google.com/

Click Add project and then follow the wizard to create a new project called ‘my-app’.

When you open the Firebase project you will see a header ‘Get started by adding Firebase to your app’. Click the web icon.

Step 1

Set up the web app with a nickname ‘my-app’ and don’t set up hosting at this stage.

Step 2

Copy the firebaseConfig object which we will use to configure our Angular app.

The code block here would be suitable for connecting a vanilla JavaScript app to Firebase. Working with Angular we can make use of a special AngularFire package to do some of this work for us.

Update your environment.ts file with the new config object.

Now from the terminal:

ng add @angular/fire

Let’s say we want a component to display a list of books:

ng generate component books-list

Now replace the contents of app.component.html with the books-list component:

<app-books-list></app-books-list>

Back in the browser you should see the new component.

The simplest way to pull data from Firebase is to use the valueChanges() method.

Update books-list.component.ts with the following code:

It’s the AngularFirestore module that gives us access to our data stored in Firebase.

Data in firebase is often stored in collections which can themselves contain either sub-collections or documents.

Update the contents of app.module.ts in order to configure the AngularFireModule:

Update books-list.component.html with a basic template that shows the title and author for each book. We need the ‘… | async’ pipe because we are handling the result of an Observable.

Back in the Firebase console click on Firestore and then Create database.

At this stage we can create our database in test mode. Note anyone with the link can access the database for 30 days, we would need to lock it down before we use it in production.

Then choose your nearest cloud location for the database to be hosted.

Once the Firestore is ready click on Start Collection and add a new collection with id ‘books’.

Then add the first document to the collection — click auto generate for the document ID.

Now you’ll see that first document back in the Firestore data page:

And if you jump to your browser you will see it rendered to the screen!

Try making a change to the document via the Firestore console. We used the Observable to access the data which means it will pull through changes automatically. Within a couple of seconds you will see the change reflected in the browser, without a reload!

Install Angular Material

Now we know a way to read data, but we also need to know how to write data to the Firestore.

Install Angular Material and choose a theme when prompted.

ng add @angular/material

There is useful documentation for each component here: https://material.angular.io/components/categories

Now include MatIconModule and MatButtonModule in your app.module.ts file in the imports array.

Next update app.component.html to include an ‘Add Book’ button.

Update app.component.ts with a method that just logs to the console.

Back in the browser you can open your dev tools and see the console log when you click the button.

Create a Dialog using Material

In the terminal:

ng generate component CreateBookDialog

In the create-book-dialog.component.ts file simply initialise an empty newBook variable and provide the onNoClick() method which cancels the dialog.

Then in the create-book-dialog.component.html template create a form with input fields for the title and author. We use [(ngModel)] for two way binding between the value of the input field, and the value in the controller.

Update the create-book-dialog.component.scss file to give the dialog a little more space.

Back in app.module.ts import the new dialog component and the Material modules.

Finally pull in the Firestore and handle the dialog in the app.component.ts controller:

Adding a new document to the Firestore collection was easy. Here we just called the add() method on the books collection and passed in the newBook object.

Back in the browser try adding new book. When you complete the dialog a new document is created in Firestore and the list is updated!