My struggle lies in accessing the document ID in Firestore. While I am able to create a randomly generated document ID, I am having trouble retrieving it for use in a delete function. The custom document ID option is also causing errors and confusion for me. I am attempting to either find a way to access the document ID for each item listed in the loop within the HTML, or to generate unique doc IDs such as parsed image URLs.
import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { WebcamImage } from 'ngx-webcam';
import { HttpClient } from '@angular/common/http';
import { visionApi } from 'src/environments/environment';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { AuthorizationService } from '../auth-service.service';
import { AngularFirestoreModule, AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { BusinessCardServiceService } from '../business-card-service.service';
interface BusinessCard {
imageUrl: string;
name: string;
email: string;
phone: string;
fullText: string;
}
...
import { Injectable } from '@angular/core';
import { AngularFirestoreModule, AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { WebcamImage } from 'ngx-webcam';
...
@Injectable({
providedIn: 'root'
})
export class BusinessCardServiceService {
...
<ul>
<div *ngFor='let card of businessCards | async'>
<div>{{card.name}} <button class="updateButton">Update Name</button></div>
<div>{{card.email}} <button class="updateButton">Update Email</button></div>
<div>{{card.phone}} <button class="updateButton">Update Phone Number</button></div>
<img [src]='card.imageUrl' />
<div><button class="DeleteButton">Delete Card</button></div>
</div>
</ul>