title: Joining Flattened Data
body: <p>i'd like to join the data on init from my customers table into the projects list. </p>
  
  <p>Model is like this:  </p>
  
  <ul>
  <li><p>projects  </p>
  
  <ul>
  <li>key  </li>
  <li>name: string  </li>
  <li>customer : customerKey  </li>
  </ul></li>
  <li><p>customers  </p>
  
  <ul>
  <li>key</li>
  <li>name: string</li>
  </ul></li>
  </ul>
  
  <p>Do you have an example, how i do this from angular2 component using angularfire2?</p>
  
  <p>my controller looks like this:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Project } from '../project';
  import { Router } from '@angular/router';
  import { FirebaseAuth } from 'angularfire2';
  import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
  import { Observable } from 'rxjs';
  
  @Component({
    moduleId: module.id,
    selector: 'app-projects',
    templateUrl: 'projects.component.html',
    styleUrls: ['projects.component.css']
  })
  export class ProjectsComponent implements OnInit {
  
    projects: FirebaseListObservable&lt;any[]&gt;;
    customers: FirebaseListObservable&lt;any[]&gt;;
    projectName: string;
    constructor(
      private router: Router,
      private af: AngularFire
    ) { };
  
    ngOnInit() {
      this.projects = this.af.database.list('projects');
    }
  
    add(projectName: string) {
      this.af.database.list('projects')
        .push({ name: projectName, id: '123' });
      this.projectName = null;
    }
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>i've changed the type of this.projects to Observable from FirebaseListObservable
  my on ngOnInit() method looks now like this:</p>
  
  <pre><code>ngOnInit() {
  this.projects = this.af.database.list(`projects`)
    .map(projects =&gt; {
      projects.map(project =&gt; {
        this.af.database.object('customer/' + project.customer + '/name')
          .subscribe(customer =&gt; {
            project.customer = customer;
          })
        return project;
      })
      return projects;
    });
  }
  </code></pre>
  
  <p>i can now access not the name property of customer from the template inside of</p>
  
  <pre><code>&lt;li *ngFor="let project of projects | async"&gt;
  
  project.customer.$value
  </code></pre>