homepage.html

<ion-header>

  <ion-navbar>
    <ion-title>Homepage</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of items | async" (click)="selectItem(item)">
      <h2>{{item.name}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

homepage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ActionSheetController } from 'ionic-angular';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import { Item } from '../../models/item/item.interface';

@IonicPage()
@Component({
  selector: 'page-homepage',
  templateUrl: 'homepage.html',
})
export class HomePage {

  private itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private afs: AngularFirestore,
    private actionSheetCtrl: ActionSheetController
  ) {
    this.itemsCollection = afs.collection<Item>('items');
    this.items = this.itemsCollection.valueChanges();
  }

  selectItem(item: Item) {
    this.actionSheetCtrl.create({
      title: `${item.name}`,
      "buttons": [
        {
          text: "Edit",
          handler: () => {
            // this.navCtrl.push('ItemEditPage',{
            //   itemId: item.$key
            // });
          }
        },
        {
          text: "Delete",
          role: "destructive",
          handler: () => {
            console.log(item);
            //this.itemsCollection.doc().delete
          }
        },
        {
          text: "Cancel",
          role: "cancel",
          handler: () => {

          }
        }
      ]
    }).present();
  }
}