Angular 11 Firestore CRUD: add/get/update/delete documents with AngularFireStore

Angular 11 Firestore CRUD Overview

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.

AngularFireStore service

import { AngularFireStore } from '@angular/fire/store';

export class TutorialService {
constructor(private db: AngularFireStore) { }
}

AngularFireStore for create/get/update/delete Document

tutorial: AngularFirestoreDocument<any>;
// db: AngularFireStore
this.tutorial = db.doc('tutorial');

// or
Observable<any> tutorial = db.doc('tutorial').valueChanges();
const tutRef = db.doc('tutorial');

// set() for destructive updates
tutRef.set({ title: 'zkoder Tutorial'});
const tutRef= db.doc('tutorial');
tutRef.update({ url: 'bezkoder.com/zkoder-tutorial' });
const tutRef = db.doc('tutorial');
tutRef.delete();

AngularFireStore for create/get/update/delete Collection

tutorials: Observable<any[]>;
// db: AngularFireStore
this.tutorials = db.collection('tutorials').valueChanges();
tutorials: Observable<any[]>;
this.tutorials = db.collection('tutorials').snapshotChanges();
const tutorialsRef = db.collection('tutorials');
const tutorial = { title: 'zkoder Tutorial', url: 'bezkoder.com/zkoder-tutorial' };
tutorialsRef.add({ ...tutorial });
const tutorialsRef = db.collection('tutorials');
tutorialsRef.doc('id').set({ title: 'zkoder Tut#1', url: 'bezkoder.com/zkoder-tut-1' });
const tutorialsRef = db.collection('tutorials');
tutorialsRef.doc('id').update({ title: 'zkoder new Tut#1' });
const tutorialsRef = db.collection('tutorials');
tutorialsRef.doc('id').delete();

Technology

  • Angular 11
  • firebase 8
  • @angular/fire 6
  • rxjs 6

Project Structure

  • add-tutorial for creating new item
  • tutorials-list contains list of items, parent of tutorial-details
  • tutorial-details shows item details

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store