Firestore Delete Issue (Not Deleting Doc Within Collection)

Angular: angular/core": “^4.0.0”

Firebase: “firebase”: “^4.5.0”,

AngularFire: angularfire2": “^5.0.0-rc.2”

Other (e.g. Ionic/Cordova, Node, browser, operating system): MacOS, Chrome

Expected behavior

When I click the “x” icon the document found within the collection should delete.

Actual behavior

Absolutely Nothing. I can console log the announcement that needs to deleted to ensure I can get the ID and other data. Thats working fine. However, the delete action never gets called.

###Code Sample

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

export interface Announcement { title: string; body: string }
export interface AnnouncementId extends Announcement{ id?: string };

@Component({
  selector: 'app-announcement-list',
  templateUrl: './announcement-list.component.html',
  styleUrls: ['./announcement-list.component.css']
})
export class AnnouncementListComponent implements OnInit {

  private announcementCollectionRef: AngularFirestoreCollection<Announcement>;
  announcements: Observable<AnnouncementId[]>;

  constructor(private afs: AngularFirestore) { 
    this.announcementCollectionRef = afs.collection<Announcement>('announcements', ref => ref.orderBy('createdAt', 'desc'));
    this.announcements = this.announcementCollectionRef.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as AnnouncementId;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
  }


  ngOnInit() {
    //console.log("Hello");
  }

  removeAnnouncement(announcement: AnnouncementId){
    console.log(announcement);
    this.announcementCollectionRef.doc(announcement.id).delete();
  }

}

<div class="item" *ngFor="let announcement of announcements | async" style="margin-bottom: 40px;">
	<div class="content">
		<a class="ui header">{{ announcement.title }}<span style="float: right;"><i class="remove icon" (click)="removeAnnouncement(announcement)"></i></span></a>
		<div class="meta">
			<span>{{ announcement.createdAt }}</span>
			<p style="font-style: italic;">Signed: {{ announcement.signedBy }}</p>
		</div>
		<div class="description" style="margin-top: 10px;">
			<p style="padding: 10px; background-color: #e1e1e1">{{ announcement.body }}</p>
		</div>
	</div>
</div>

[katowulf]

Can anyone verify whether this is actually an AngularFire2 issue by trying this with the vanilla SDK? Wondering where this should be getting reported and whom should get pinged to investigate.

[jamesdaniels]

Glad to see you sorted it out.

I’ll put create, update, and delete in the examples; that way it’s demonstrated.