title: How to use snapshotChanges() method to get both key value and filter the data?
body: <p>I'm working on an Angular Firebase Project, where I need to filter my database as well get the key values. Currently I'm using <strong>valueChanges()</strong> method in my service code (<em>inside getUnreadBooks and getFavoriteBooks methods, as shown below</em>) to get the data and filter it. But it gives me key value as 'undefined', when I try to get key value inside my template file. I tried to go with <strong>snapshotChanges()</strong> method, but can't work around how to use it  to get key values along with filtering the data . Below are my Angular FirebaseService, home.component.ts (<em>in which I am injecting my service code</em>) and home.component.html (template file) Code respectively:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { AngularFireDatabase } from 'angularfire2/database';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class FirebaseService {
  
    books: Observable&lt;any[]&gt;;
    unreadBooks;
    favoriteBooks;
  
    constructor(private db: AngularFireDatabase) {}
  
    getBooks(){
          this.books = this.db.list('/books').valueChanges() as Observable&lt;any[]&gt;;
          return this.books;
      }       
  
    getFavoriteBooks(){
      this.favoriteBooks = this.db.list('/books').valueChanges() as Observable&lt;any[]&gt;;
      this.favoriteBooks = this.favoriteBooks.map(books =&gt; {
          const topRatedBooks = books.filter(item =&gt;  item.rate&gt;4);
          return topRatedBooks;
      })
      return this.favoriteBooks;
    }
  
    getUnreadBooks(){
      this.unreadBooks = this.db.list('/books').valueChanges() as Observable&lt;any[]&gt;;
      this.unreadBooks = this.unreadBooks.map(books =&gt; {
          const ub = books.filter(item =&gt; item.dateread == null);
          return ub;
      })
      return this.unreadBooks;
    }
  }
  </code></pre>
  
  <p>Home.Component.ts file =></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FirebaseService } from '../../services/firebase.service';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    //favorite Books
    favoriteBooks: any;
    unreadBooks: any;
  
    constructor(private firebaseService: FirebaseService) { }
  
    ngOnInit() {
      this.firebaseService.getFavoriteBooks()
          .subscribe(favBooks =&gt; {
              this.favoriteBooks = favBooks;
              console.log(this.favoriteBooks);
          })
      this.firebaseService.getUnreadBooks()
          .subscribe(ubBooks =&gt; {
              this.unreadBooks = ubBooks;
              console.log('Unread Books:', this.unreadBooks);
          })
    }
  
  }
  </code></pre>
  
  <p>Home.component.html file =></p>
  
  <pre><code>&lt;mat-toolbar&gt;
      My Top Rated Books
  &lt;/mat-toolbar&gt;
  &lt;mat-grid-list cols="3"&gt;
      &lt;mat-grid-tile *ngFor="let book of favoriteBooks"&gt;
          &lt;mat-card&gt;
              &lt;mat-card-header&gt;
                  &lt;mat-card-title&gt;
                      &lt;h4&gt;{{book.title}}&lt;/h4&gt;
                  &lt;/mat-card-title&gt;
              &lt;/mat-card-header&gt;
              &lt;img mat-card-image src="{{book.imageUrl}}" alt="{{book.title}}"&gt;
              &lt;mat-card-actions&gt;
                  &lt;button mat-button mat-raised-button class="detailsButton" [routerLink]="['/book/'+book.$key]"&gt;
                      &lt;i class="material-icons"&gt;visibility&lt;/i&gt;Book Details&lt;/button&gt;
                  &lt;button mat-button mat-raised-button class="editButton" [routerLink]="['/editbook/'+book.$key]"&gt;
                      &lt;i class="material-icons"&gt;mode_edit&lt;/i&gt;Edit Book&lt;/button&gt;
              &lt;/mat-card-actions&gt;
          &lt;/mat-card&gt;     
      &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  
  &lt;mat-toolbar&gt;
      Books I have not read yet
  &lt;/mat-toolbar&gt;
  &lt;mat-grid-list cols="3"&gt;
      &lt;mat-grid-tile *ngFor="let book of unreadBooks"&gt;
          &lt;mat-card&gt;
              &lt;mat-card-header&gt;
                  &lt;mat-card-title&gt;
                      &lt;h4&gt;{{book.title}}&lt;/h4&gt;
                  &lt;/mat-card-title&gt;
              &lt;/mat-card-header&gt;
              &lt;img mat-card-image src="{{book.imageUrl}}" alt="{{book.title}}"&gt;
              &lt;mat-card-actions&gt;
                  &lt;button mat-button mat-raised-button class="detailsButton" [routerLink]="['/book/'+book.$key]"&gt;
                      &lt;i class="material-icons"&gt;visibility&lt;/i&gt;Book Details&lt;/button&gt;
                  &lt;button mat-button mat-raised-button class="editButton" [routerLink]="['/editbook/'+book.$key]"&gt;
                      &lt;i class="material-icons"&gt;mode_edit&lt;/i&gt;Edit Book&lt;/button&gt;
              &lt;/mat-card-actions&gt;
          &lt;/mat-card&gt;     
      &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>