# Building Real-time Apps with Firebase part 10, Async Pipe error

**URL:** https://forum.codewithmosh.com/t/building-real-time-apps-with-firebase-part-10-async-pipe-error/4227
**Category:** Angular
**Created:** [April 17, 2021, 5:06am UTC](https://forum.codewithmosh.com/t/building-real-time-apps-with-firebase-part-10-async-pipe-error/4227 "2021-04-17T05:06:49Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![cEast](https://avatars.discourse-cdn.com/v4/letter/c/e9bcb4/32.png) [@cEast](https://forum.codewithmosh.com/u/cEast)
#### Post date: [April 17, 2021, 5:06am UTC](https://forum.codewithmosh.com/t/building-real-time-apps-with-firebase-part-10-async-pipe-error/4227/1 "2021-04-17T05:06:49Z")

</div>

I’m coding along with Mosh on his tutorial, using the same Angular version, although a _different_ Angularfire version due to angularfire2 being deprecated and succeeded by @angular/fire.

I’m doing exactly as he does with no compiler errors, but upon launching the code from the end of the video, nothing is appearing on the website project where it should be showing the contents of the Firebase database linked. I can _make_ content show via using `<td> course </td>` in app.component.html, but I still have to subscribe manually in app.component.ts and assume the entire point of the tutorial was to utilize async anyway.

In addition to nothing appearing on localhost:4200, the console reports the following:  
`ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'`.

Here is the Component and HTML view:

[//app.component.ts](https://app.component.ts)

```
import { Component, OnDestroy } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';

import { Subscription } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  courses$

  constructor(db: AngularFireDatabase) {
    this.courses$ = db.list('/courses');
  }
}

```

[//app.component.html](https://app.component.html)

```
<ul>
  <li *ngFor="let course of courses$ | async ">
    {{ course.$value }}
  </li>
</ul>
```