Deleting a document from a user specific collection in Firebase

Question

I am new to Firebase and working on a small project to get better acquainted with Firebase/Firestore. Right now I'm using Firebase authentication to handle registering and signing in users. Once logged in a list of events is displayed for the user that I created in MySQL and am connecting to my Angular/Ionic app through a http call to Spring. (It was specified for me to do it this way to also learn some Java/Spring.)

I am able to display the events and click to add an event to a user specific "my events" list. I followed the tutorial here: https://javebratt.com/ionic-firebase-tutorial-object/

I'm having trouble deleting an event from the users list in Firestore. I'm able to see the specific event ID that gets added by Firestore when the user selects an event to add to "my events" with "event.id" in my *ngFor template in the html.

No matter what I do though I can't get the delete function to work properly. It actually is saying it's running successfully, but nothing is being deleted. I believe I'm missing something between the .doc() and .delete() methods but the Google docs are very vague (or I'm not grasping them correctly).

I've tried specifying a path such as

.doc(`/users/${user.uid}/myEventList/${id}`

but that doesn't work. Any help and insight is greatly appreciated.

Here is what I have so far that prints the success message:

 removeEvent() {
    this.myEventListRef
      .doc()
      .delete()
      .then(function() {
        console.log("Document successfully deleted!");
      })
      .catch(function(error) {
        console.error("Error removing document: ", error);
      });
  } 

Here is my full service.ts:

import { Injectable } from "@angular/core";
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { Observable } from "rxjs";
import { HttpClient } from "@angular/common/http";
import { ToastController } from "@ionic/angular";

@Injectable({
  providedIn: "root"
})
export class EventService {
  public myEventListRef: firebase.firestore.CollectionReference;
  public myEventsList: Observable<Event[]>;
  public currentEvent: any = {};

  constructor(
    public toastController: ToastController,
    private http: HttpClient
  ) {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.myEventListRef = firebase
          .firestore()
          .collection(`/users/${user.uid}/myEventList`);
      }
    });
  }

  getEventList(): firebase.firestore.CollectionReference {
    return this.myEventListRef;
  }

  copyEvent(
    eventName: string,
    eventPrice: number,
    eventLocation: string,
    eventType: string
  ): Promise<firebase.firestore.DocumentReference> {
    return this.myEventListRef.add({
      name: eventName,
      price: eventPrice,
      location: eventLocation,
      type: eventType
    });
  }
  removeEvent() {
    this.myEventListRef
      .doc()
      .delete()
      .then(function() {
        console.log("Document successfully deleted!");
      })
      .catch(function(error) {
        console.error("Error removing document: ", error);
      });
  }

  getEventsObservable(): Observable<any> {
    return this.http.get("http://localhost:8080/events/eventslistX");
  }

  async addToMyEventsToast() {
    const toast = await this.toastController.create({
      color: "secondary",
      message: "Added to 'My Events'.",
      duration: 2000
    });
    toast.present();
  }
}

my-events.ts where the user specific events are displayed after they select one from the initial Events list :

import { Component, OnInit } from "@angular/core";
import { EventService } from "../services/event.service";

import { Observable } from "rxjs";

@Component({
  selector: "app-my-events",
  templateUrl: "./my-events.page.html",
  styleUrls: ["./my-events.page.scss"]
})
export class MyEventsPage implements OnInit {
  public myEventsList: Array<any>;
  public currentEvent: any = {};

  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.eventService
      .getEventList()
      .get()
      .then(eventListSnapshot => {
        this.myEventsList = [];
        eventListSnapshot.forEach(snap => {
          this.myEventsList.push({
            id: snap.id,
            name: snap.data().name,
            price: snap.data().price,
            location: snap.data().location,
            type: snap.data().type,
            date: snap.data().date
          });
          return false;
        });
      });
  }

  removeEventHandler() {
    this.eventService.removeEvent();
  }
}

And my HTML that displays the users list of events they selected and where I can see the firestore id :

<ion-content>
  <ion-card *ngFor="let event of myEventsList; index as i">
    <ion-card-header>
      <ion-card-title>{{ event.id }}</ion-card-title>
      <ion-card-title>{{ event.name }}</ion-card-title>
      <ion-card-subtitle>$ {{ event.price }}</ion-card-subtitle>
      <ion-card-subtitle>City: {{ event.location }}</ion-card-subtitle>
      <ion-card-subtitle> Type of event : {{ event.type }}</ion-card-subtitle>
      <ion-icon
        name="close-circle"
        color="danger"
        (click)="removeEventHandler()"
      ></ion-icon>
    </ion-card-header>
  </ion-card>
</ion-content>

Answer 1

It turns out I completely forgot the tutorial I was following mentioned how to get the ID as I didn't need the delete method while reading it so I skipped it.

In my event-service.ts I added the following to get the id from my document reference :

  getEventDetail(eventId: string): firebase.firestore.DocumentReference {
    return this.eventListRef.doc(eventId);
  }

and added the following method in the same service :

  removeEvent(eventId) {
    this.eventListRef
      .doc(eventId)
      .delete()
      .then(function() {
        console.log("Document successfully deleted!");
      })
      .catch(function(error) {
        console.error("Error removing document: ", error);
      });
  }

And finally updated my handler in the my-events-page.ts :

  removeEventHandler(event) {
    this.eventService.removeEvent(event.id);
  }

This is the click event in my HTML

(click)="removeEventHandler(event)"