Angular 10 Firebase CRUD with Firestore Tutorial and Example

WebTutPro
techiediaries.com
Published in
2 min readAug 26, 2020

In this tutorial, you’ll be using Angular 10/9 with Firebase and Firestore database to create an app that implements the common CRUD operations.

Angular 10 Firebase CRUD Tutorial and Example

You can also read how to use your own self-hosted database with Node and TypeORM.

We’ll see step by step how to set up Firebase in our Angular 10 project, and create a service for implementing Firebase CRUD operations using the Firestore realtime database.

Angular 10 CRUD with Firebase and Firestore Database

These are the steps of our Angular 10 Firebase CRUD tutorial:

  • Step 1 — Creating your Angular 10 Project
  • Step 2 — Creating a Firebase Project and a Firestore Database
  • Step 3 — Installing and Adding Firebase to your Angular 10 Project.
  • Step 4 — Create an Angular 10 Model
  • Step 5 — Creating an Angular 10 Service
  • Step 6 — Creating a Component for Making CRUD Operations

What is CRUD?

CRUD stands for Create, Read, Update and Delete and refer to the operations that we run against a database to create, retrieve, update and delete data. In this example, the database is a Firestore database that exists on the cloud.

Note: This tutorial works with Angular 9.

Prerequisites

Before starting this tutorial, you first need to make sure, you have:

  • A recent version of Node.js (v10+) and NPM installed on your system,
  • The latest Angular CLI 10 installed on your system.

If you have the prerequisites, you are ready to start creating your project!

Read the full tutorial -> https://www.techiediaries.com/angular-10-firebase-database-crud/

--

--