title: this.angularFireList.remove is not a function
body: <p>Hi I am following <a href="https://www.youtube.com/watch?v=UHTBnTg4rno&amp;list=PLtKjv92L0ihAJ90_NbqCINRu4uKy3RJJU&amp;index=13" rel="nofollow noreferrer">this tutorial</a> and now I am unable to remove a record from firebase realtime database.</p>
  
  <p>(updated 11 June 2018) -- previously I was suspecting this error comes when I use FirebaseListObservable, however it turns out the error also happens when using AngularFireList.</p>
  
  <h2>Using AngularFireList</h2>
  
  <pre><code>Runtime Error
  _this.produkkuListRef.remove is not a function
  </code></pre>
  
  <p>This is the page which has a remove function:</p>
  
  <p><strong>fleks-bisnis-produkku.module.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams, ActionSheetController } from 'ionic-angular';
  import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
  import { ProdukItem } from '../../models/produk-item/produk-item.interface';
  
  @IonicPage()
  @Component({
    selector: 'page-fleks-bisnis-produkku',
    templateUrl: 'fleks-bisnis-produkku.html',
  })
  export class FleksBisnisProdukkuPage {
  
    produkkuList: AngularFireList&lt;ProdukItem[]&gt;;
  
    constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase,
      private actionSheetCtrl: ActionSheetController) {
  
      this.produkkuListRef = this.database.list('produk-list').valueChanges();
      console.log(this.produkkuListRef);
    }
  
    selectProdukItem(produkItem: ProdukItem){
  
      this.actionSheetCtrl.create({
        title: `${produkItem.itemName}`,
        buttons:[
          {
            text: 'Edit',
            handler: () =&gt; {
               // send the user to the EditProdukItemPage and pass the key as a parameter
            }
          },
          {
            text: 'Delete',
            role: 'destructive',
            handler: () =&gt; {
              //delete the current ProdukItem, passed in via the parameter
              console.log(this.produkkuListRef);
              this.produkkuListRef.remove(produkItem.$key);
            }
          },
          {
            text: 'Cancel',
            role: 'cancel',
            handler: () =&gt; {
              console.log("The user has selected the cancel button");
            }
          }
        ]
      }).present();
    }
  
    pushToTambahProduk(){
      this.navCtrl.push('FbTambahProdukPage')
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad FleksBisnisProdukkuPage');
    }
  
  }
  </code></pre>
  
  <h2>Using FirebaseListObservable</h2>
  
  <pre><code>Runtime Error
  _this.produkkuListRef$.remove is not a function
  </code></pre>
  
  <p>This is the page which has a remove function:</p>
  
  <p><strong>fleks-bisnis-produkku.module.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams, ActionSheetController } from 'ionic-angular';
  
  import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
  
  import { ProdukItem } from '../../models/produk-item/produk-item.interface';
  
  @IonicPage()
  @Component({
    selector: 'page-fleks-bisnis-produkku',
    templateUrl: 'fleks-bisnis-produkku.html',
  })
  export class FleksBisnisProdukkuPage {
  
    produkkuListRef: FirebaseListObservable&lt;ProdukItem[]&gt;;
  
    constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase,
      private actionSheetCtrl: ActionSheetController) {
  
      this.produkkuListRef$ = this.database.list('produk-list').valueChanges();
      console.log(this.produkkuListRef$);
    }
  
    selectProdukItem(produkItem: ProdukItem){
  
      this.actionSheetCtrl.create({
        title: `${produkItem.itemName}`,
        buttons:[
          {
            text: 'Edit',
            handler: () =&gt; {
               // send the user to the EditProdukItemPage and pass the key as a parameter
            }
          },
          {
            text: 'Delete',
            role: 'destructive',
            handler: () =&gt; {
              //delete the current ProdukItem, passed in via the parameter
              console.log(this.produkkuListRef$);
              this.produkkuListRef$.remove(produkItem.$key);
            }
          },
          {
            text: 'Cancel',
            role: 'cancel',
            handler: () =&gt; {
              console.log("The user has selected the cancel button");
            }
          }
        ]
      }).present();
    }
  
    pushToTambahProduk(){
      this.navCtrl.push('FbTambahProdukPage')
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad FleksBisnisProdukkuPage');
    }
  
  }
  </code></pre>
  
  <h2>Other References</h2>
  
  <p>this is my interface file that is imported to the page above</p>
  
  <p><strong>produk-item.interface.ts</strong></p>
  
  <pre><code>export interface ProdukItem{
      $key?: string;
      itemName: string;
      itemHarga: number;
  }
  </code></pre>
  
  <p>this is my package.json file:</p>
  
  <pre><code>{
    "name": "go-fleksales",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
      "clean": "ionic-app-scripts clean",
      "build": "ionic-app-scripts build",
      "lint": "ionic-app-scripts lint",
      "ionic:build": "ionic-app-scripts build",
      "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
      "@angular/animations": "5.2.10",
      "@angular/common": "5.2.10",
      "@angular/compiler": "5.2.10",
      "@angular/compiler-cli": "5.2.10",
      "@angular/core": "5.2.10",
      "@angular/forms": "5.2.10",
      "@angular/http": "5.2.10",
      "@angular/platform-browser": "5.2.10",
      "@angular/platform-browser-dynamic": "5.2.10",
      "@ionic-native/core": "4.7.0",
      "@ionic-native/splash-screen": "4.7.0",
      "@ionic-native/status-bar": "4.7.0",
      "@ionic/pro": "1.0.20",
      "@ionic/storage": "2.1.3",
      "angularfire2": "^5.0.0-rc.10",
      "firebase": "^5.0.4",
      "ionic-angular": "3.9.2",
      "ionicons": "3.0.0",
      "rxjs": "^6.2.0",
      "rxjs-compat": "^6.2.0",
      "sw-toolbox": "3.6.0",
      "zone.js": "0.8.26"
    },
    "devDependencies": {
      "@ionic/app-scripts": "3.1.9",
      "typescript": "~2.6.2"
    },
    "description": "An Ionic project"
  }
  </code></pre>
  
  <p>I've been searching on google, and it seems that my code is correct. What could be causing this error?</p>
  
  <p>Thank you so much for your help.</p>