How to CRUD in Angular + Firebase Firestore

www.dottedsquirrel.com
8 min read
standard
A complete example walk through with code snippets and full code repo
CRUD — Create, Read, Update, Delete — the four holy grail of database actions. 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 making

It'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…
Aphinya Dechalert
Read full article