import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { EventService } from '../../services/event.service';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';

import { Client } from '../../models/Client';
import { Event } from '../../models/Event';

@Component({
  selector: 'app-client-details',
  templateUrl: './client-details.component.html',  styleUrls: ['./client-details.component.css']
})
export class ClientDetailsComponent implements OnInit {
  id: string;
  client: Client;
  event: Event;
  events: Event[];
  hasDeposit: boolean = false;
  showDepostUpdateInput: boolean = false;

  constructor(
    private clientService: ClientService,
    private eventService: EventService,
    private router: Router,
    private route: ActivatedRoute,
    private flashMessage: FlashMessagesService,
  ) { }

  ngOnInit() {
    // Get id from url
    this.id = this.route.snapshot.params['id'];
    // Get the client
    this.clientService.getClient(this.id).subscribe(client => {
      if(client != null) {
        // Get all events
        this.eventService.getEvents(this.id).subscribe(events => {
          this.events = events; <-- I would assume an error would appear here too? (It does not)
        });
      }
      this.client = client;
      this.events = events; <-- Error thrown here
    });
  }

  ...

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection,
AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/observable';

import { Event } from '../models/Event';

@Injectable()
export class EventService {
  eventsCollection: AngularFirestoreCollection<Event>;
  eventDoc: AngularFirestoreDocument<Event>;
  events: Observable<Event[]>;
  event: Observable<Event>;

  constructor(private afs: AngularFirestore) {
    this.eventsCollection = this.afs.collection('events', ref => ref.orderBy('date', 'asc'));
  }

  getEvents(id): Observable<Event[]> {
   // Get events with the client id
   this.events = this.afs.collection('events', ref => ref.where('clientID', '==', id)).snapshotChanges().map(actions => {
   return actions.map(a => {
     const data = a.payload.doc.data() as Event;
     return data;
   })
  });

  return this.events;
}