Angular 9 CRUD Firestore Example — use @angular/fire: Post/get/delete/update query documents

The Firestore is a cloud-hosted NoSQL database that lets you store and sync data between your users in realtime. We can structure data in our ways to improve querying and fetching capabilities. So in the tutorial, I introduce how to build an “Angular 9 CRUD Firestore Example” project with the help of @angular/fire lib to do CRUD operation: POST/GET/PUT/DELETE queries with step by step coding examples.

– I draw a fullstack overview diagram architecture from Angular frontend to Cloud Firestore.
– I illustrate details about @angular/fire CRUD operations.
– I implement Angular 9 CRUD application with the @angular/fire lib to do CRUD queries (Post/Get/Put/Delete document) to Cloud Firestore.

Overall Architecture System: Angular 9 + Cloud Firestore

Angular 9 Firestore Diagram Architecture Integration

We use @angular/fire to integrate Angular Application with Firebase. Angular will use a service to do CRUD queries (post/get/put/delete document) with Cloud Firestore and show data on user-view through components.

Angular 9 CRUD Firestore Application Design

Angular 9 Diagram Architecture Design

– Angular 9 CRUD Application is designed with 3 main layers:

• Service Layer is used to do CRUD requests with Cloud Firestore
• Component Layer is used to define Angular 9 Components to display views in Browser.
• Router Layer is used to define all Angular navigation URLs mapping with the corresponding Angular Components

Angular 9 Firestore project structure

Angular Put data to Firestore using @angular/fire

Angular 9 Update data to Firestore

Tutorial Link

Tutorial: Angular 9 CRUD Firestore Example - use @angular/fire: Post/get/delete/update query…