They are the only things you’ll ever need to do anything significant with your database.

Sure, you can increase the complexity of the queries but at the end of the day, it all boils down the these four actions.

Firebase is a Google owned cloud based system that comes complete with API hooks, file storage space, auth system and hosting capabilities.

It’s a much underrated system that should be utilized more for prototyping and rapid application development.

If you want to boot up a progressive web app but don’t have the backend experience of setting up servers, creating APIs and dealing with databases, then Firebase makes a fantastic option for front end developers who may feel isolated and bogged down by the massive hill of information they have to process to even get their app up and running.

Or if you’re just short on time, Firebase can cut your development hours almost in half so you can focus on user experience and implementing those UI flows.

It’s also flexible enough to migrate out your front end application and use a different database if needed.

Here’s a quick guide on how to implement CRUD actions with Angular and Firebase.

What we’ll be makingIt’s a bare bones coffee ordering app where you can add orders (create), list orders from the database (read), mark order as completed (update) and remove an order (delete).

The purpose of this tutorial is to help you get started with Firebase Firestore and see how easy it is to connect to and get started on the Google owned service.

This is not an advert for Google (I get no kickbacks from them for this) but merely an illustration of how Angular plays with the database.

The app we’re going to make is not perfect.

There are things missing like data validation and a million possible features that I can also add.

But that’s not the point.

The point is to set up in Angular as quickly as possible and get it working with a live database.

So, enough of the intro — here’s the code walk through.

The initial setupSet up your Angular app via the Angular CLI.

If you don’t already have Angular CLI, you can find out more about it here.

In short, simply run these commands in your terminal in the directory where you want your Angular app to sit.

All classes that you will see in the rest of this tutorial is from Materialize CSS, unless mentioned otherwise.

Setting up the formIn order to set up forms, import ReactiveFormsModule in app.

module.

ts and remember to import it in the imports array.

import { ReactiveFormsModule } from "@angular/forms";Inside orders.

service.

ts import FormControl and FormGroup from @angular/formsand create a new form outside the constructor where you can set the properties of the form as below:import { FormControl, FormGroup } from "@angular/forms";.

export class OrdersService { constructor() {} form = new FormGroup({ customerName: new FormControl(''), orderNumber: new FormControl(''), coffeeOrder: new FormControl(''), completed: new FormControl(false) })}We’ll use these values to store in Firebase a little later in this tutorial.

Using the form inside a componentimport the OrdersService class into your component so you can use the object inside your component and then create an object of the class inside the constructor.

import { OrdersService } from ".

/shared/orders.

service";.

constructor(private ordersService:OrdersService){}Inside your orders.

component.

html use the formGroup directive to reference the form object created in OrdersService.

Each formControlName references the names we used in the formGroup created inside the OrdersService class.

This will allow the associated controller to use the variables typed into the form.