Integrating Firestore Database — Ionic Part 5

Sameeha Rahman
Jul 22 · 5 min read

Step 1 — The C in CRUD to Firestore

constructor(..public firestore: AngularFirestore) {}
this.afAuth.authState.subscribe(user => {
if (user) {
this.userId = user.uid
this.fireStoreTaskList = this.firestore.doc<any>('users/' + this.userId).collection('tasks').valueChanges();
this.fireStoreList = this.firestore.doc<any>('users/' + this.userId).collection('tasks');
}
});
let id = this.firestore.createId();
this.fireStoreList.doc(id).set({
id: id,
taskName: task
});

Step 2 — The R in CRUD in the App

<ion-item *ngFor="let todo of fireStoreTaskList | async">
{{todo.taskName}}
Create and Read tasks
Newly created task

Step 3 — The U in CRUD to Firestore

<button ion-button clear (click)="updateTask(todo.id)">
this.fireStoreList.doc(index).update({ taskName: data.editTask });
Update task name
Updated task name

Step 4 — The D in CRUD to Firestore

<button ion-button clear (click)=”deleteTask(todo.id)”>
this.fireStoreList.doc(index).delete();
Delete task
Task deleted in Firestore
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade