title: Length of nested list/array anfularfire 2
body: <p>I have the following setup in my <strong>firebase project</strong>:</p>
  
  <pre><code>- Clients
    - Client 1
       - Name
       - Services
           - Service 1
           - Service 2
    - Client 2
       - Name
       - Services
           - Service 1
           - Service 2
           - Service 3
  </code></pre>
  
  <p>In top of this I have a service which provides the clients to my component, this is my <strong>component</strong> which implements the service:</p>
  
  <pre><code>@Component({
    selector: 'app-client-list',
    templateUrl: './client-list.component.html',
    styleUrls: ['../../dashboard.component.css'],
    providers: [clientService]
  })
  export class ClientListComponent implements OnInit {
    clients: Client[];
    dataAvailable: boolean;
    constructor(private clientService: clientService) {
      this.dataAvailable = false;
      this.clientService = clientService;
    }
    ngOnInit() {
      this.clientService.getClients().subscribe(res =&gt; {
        this.clients = res;
        this.dataAvailable = true;
      });
    }
    updateSearch(a: string) {
      this.cientService.getClient(a);
    }
  }
  </code></pre>
  
  <p>And this is how I show it (or how I'm supposed to) in my <strong>HTML</strong>: </p>
  
  <pre><code>    &lt;div *ngIf="dataAvailable"&gt;
  &lt;div id="row" *ngFor="let item of homies"&gt;
      &lt;span&gt;{{item.name}}&lt;/span&gt;
      &lt;span&gt;{{item.upcomingServices.length}}&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Right now {{item.upcomingServices.length}} shows nothing, it just leaves a blank space, I have already tried these two variation but nothing seems to work: </p>
  
  <p>{{(item.upcomingServices | async).length}}
  {{(item.upcomingServices | async)?.length}}</p>
  
  <p>The first one gives this error:</p>
  
  <pre><code>Cannot read property 'length'  of null
  </code></pre>
  
  <p>And the second one gives this one: </p>
  
  <pre><code>InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
  </code></pre>
  
  <p>This is the <strong>service</strong> that I use to retrieve the clients:</p>
  
  <pre><code>@Injectable()
  export class ClientService {
    homies: FirebaseListObservable&lt;Client[]&gt;;
    subject: BehaviorSubject&lt;any&gt;;
    constructor(db: AngularFireDatabase) {
      this.subject = new BehaviorSubject('');
      this.clients = db.list('/clients', {
        query: {
          orderByChild: 'name',
          startAt: this.subject
        }
      });
    }
    getClients() {
      this.subject.next('');
      return this.clients;
    }
    getClient(id: number | string) {
      this.subject.next(id);
      return this.clients;
    }
  }
  </code></pre>
  
  <p>Any Idea of how can I get the length of a nested array inside the HTML, in this case the length of services when showing the clients.</p>