Ducumentation Issues

[Anystrous]

Since the update the documentation examples are completely broken.

For example: This list example wont compile

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
      <input type="text" #updatetext [value]="item.text" />
      <button (click)="updateItem(item.$key, updatetext.value)">Update</button>
      <button (click)="deleteItem(item.$key)">Delete</button>
    </li>
  </ul>
  <input type="text" #newitem />
  <button (click)="addItem(newitem.value)">Add</button>
  <button (click)="deleteEverything()">Delete All</button>
  `,
})
export class AppComponent {
  itemsRef: Observable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.itemsRef = db.list('messages').valueChanges();
  }
  addItem(newName: string) {
    this.itemsRef.push({ text: newName });
  }
  updateItem(key: string, newText: string) {
    this.itemsRef.update(key, { text: newText });
  }
  deleteItem(key: string) {    
    this.itemsRef.remove(key); 
  }
  deleteEverything() {
    this.itemsRef.remove();
  }
}

I get the error saying Property 'push' , 'update', 'remove' does not exist on type Observable<any[]>.

Yes I did update to version 5 using @next.

Previous examples were working great with version 4.

The dependencies are also incorrect in the Object example.

Please correct me if I am wrong.

[davideast]

@Anystrous

Update: I see the problem. The docs need this fix:

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
      <input type="text" #updatetext [value]="item.text" />
      <button (click)="updateItem(item.$key, updatetext.value)">Update</button>
      <button (click)="deleteItem(item.$key)">Delete</button>
    </li>
  </ul>
  <input type="text" #newitem />
  <button (click)="addItem(newitem.value)">Add</button>
  <button (click)="deleteEverything()">Delete All</button>
  `,
})
export class AppComponent {
  itemsRef: AngularFireList<any>;
  items: Observable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.itemsRef = db.list('messages');
    this.items = this.itemsRef.valueChanges();
  }
  addItem(newName: string) {
    this.itemsRef.push({ text: newName });
  }
  updateItem(key: string, newText: string) {
    this.itemsRef.update(key, { text: newText });
  }
  deleteItem(key: string) {    
    this.itemsRef.remove(key); 
  }
  deleteEverything() {
    this.itemsRef.remove();
  }
}

We had breaking changes in version 5.0. There is a migration guide and if you want you can continue to use the old database API with angularfire2/database-deprecated.

The main difference in this sample is that FirebaseListObservable no longer exists and we switched to a Service Based API in AngularFireList<T>. This allows you to do data operations like push(), andset(). It also allows you to create different types of observable streams. You can get similar results with the old API in .valueChanges() and do tons of other great things with .snapshotChanges(), .stateChanges(), and .auditTrail().

I highly recommend using this API. Check out the documentation. File an issue if you find anything confusing. We're here to help :)

[Anystrous]

The problem is with new documentation. Please check it yourself

[davideast]

@Anystrous I updated my comment with a fix. We're working on the change right now.

[Anystrous]

Thank you.

[gerhardcit]

This is still wrong
You are using <button (click)="updateItem(item.$key, updatetext.value)">Update</button>
whilst the .valueChanges() does not provide a $key anymore.

[Anthony2539]

Yes i don't understand how this can work with .valueChanges

How to use the $key simply in the template?

[ayoubboumzebra]

Hi, when i remove an item, all the data deleted in the same time, although i used the same code of @davideast, any idea ?

[davideast]

@AyoubBoum Can you open a new issue that follows the template and gives a stackblitz?