Shared Data Service AngularFire2

Question

I Basically needs a Shared service that stores the Realtime data from Firebase in a Variable. Various Components would then call a custom method in the service which would return the latest data from the Data store. This would mean instant data rather having to fetch the data which is the case when I return a FirebaseObservableList from Service. Hope you understand

Please have a look at the Service

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseObjectObservable, FirebaseListObservable } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';

@Injectable()
export class TransactionService {

    protected userTransactions;
    private bought: Array<any> = [];
    constructor(private db: AngularFireDatabase, private auth: AuthService) {
        // Listener to User Transactions
        this.getUserTransactions(this.auth.getUserKey())
            .subscribe((transactions) => {
                this.userTransactions = transactions;
                this.processTransactions();
            });
    }
    getUserTransactions(userKey: string): FirebaseListObservable<any[]> {
        return this.db.list('/UserTransactions/' + userKey);
    }
    getCurrentUserTransactions() {
        return this.userTransactions;
    }

    /**
     * Process the Transactions and 
     * Categorize them
     */
    processTransactions() {
        this.rewarded = [];
        this.userTransactions.forEach(transaction => {
            let rewardType = transaction.transactiontype;
            switch (rewardType) {
                case "bought":
                    this.bought.push(transaction);
                    break;


                default:
                    break;
            }
        });
    }
    getBought() {
        return this.bought;
    }

}

Now the Component

import { Component, OnInit } from '@angular/core';
import { trigger, state, transition, style, animate } from '@angular/animations';
// Services
import { TransactionService } from '../../../services/transaction.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [
    trigger('fadeInOut', [
      transition('void => *', [
        style({ opacity: 0 }),
        animate(150, style({ opacity: 1 }))
      ]),
      transition('* => void', [
        animate(150, style({ opacity: 0 }))
      ])
    ])
  ],
})
export class HomeComponent implements OnInit {
  public bought: Array<any>;
  public activeTab: string = 'recieved';
  constructor(private transactions: TransactionService) {
    this.bought = this.transactions.getBought();
  }
  ngOnInit() {

  }
}

PS : I'm pretty new to Angular2 and Observables

Answer 1

So Guys finally found the answer myself. Created another Observable (BehaviorSubject) to store the latest data. Components then subscribed to this observable.

private _rewards: BehaviorSubject<any[]>;

constructor(private db: AngularFireDatabase, private auth: AuthService) {

        this.dataStore = {
            rewards: [],

        };

        this._rewards = <BehaviorSubject<any[]>>new BehaviorSubject([]);

        this.subscribeToRewarded();

    }

    subscribeToRewarded() {
        this.db.list('< DB Path >', {
            query: {
                orderByChild: 'transactiontype',
                equalTo: "reward"
            }
        }).subscribe((reward) => {
            this._rewards.next(reward);
        });
    }

    getRewarded() {
        return this._rewards.asObservable();
    }