Getting error "AngularFireList<any> is not assignable to Promise<any[]>...." during adding object in firebase using Angular10

Question

When I try to implement this, object is created in Firebase perfectly but, .html file is not showing the output and showing error at line(below). I have also added error message below. Please help me, I am stuck at this since 2 days.

<li *ngFor="let course of courses$ | async">

app.component.ts

import { Component, OnDestroy } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database'
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy{
  
  courses$!: AngularFireList<any>;
 
  constructor(db: AngularFireDatabase){
    this.courses$ = db.list('/courses');
    console.log(this.courses$); 
  }
  addCourse(courseValue: HTMLInputElement){
    this.courses$.push({
      name: courseValue.value
    });
    console.log(courseValue.value);
    courseValue.value= '';
  }
  ngOnDestroy(){
  }
}

app.component.html

<h2>PUSH</h2>
<input type="text" (keyup.enter)="addCourse(course)" #course>
<ul>
  <li *ngFor="let course of courses$ | async">
    {{ course }}
  </li>
</ul> 

Error Message:

Error: src/app/app.component.html:18:29 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(obj: Subscribable<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined> | Promise<any[] | Iterable<any> | (Iterable<...> & any[]) | (any[] & Iterable<...>) | undefined>): any[] | ... 4 more ... | undefined', gave the following error.
    Argument of type 'AngularFireList<any>' is not assignable to parameter of type 'Subscribable<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined> | Promise<any[] | Iterable<any> | (Iterable<...> & any[]) | (any[] & Iterable<...>) | undefined>'.
      Type 'AngularFireList<any>' is missing the following properties from type 'Promise<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined>': then, catch, [Symbol.toStringTag], finally
  Overload 2 of 3, '(obj: null | undefined): null', gave the following error.
    Argument of type 'AngularFireList<any>' is not assignable to parameter of type 'null | undefined'.
      Type 'AngularFireList<any>' is not assignable to type 'null'.
  Overload 3 of 3, '(obj: Subscribable<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined> | Promise<any[] | Iterable<any> | (Iterable<...> & any[]) | (any[] & Iterable<...>) | undefined> | null | undefined): any[] | ... 4 more ... | undefined', gave the following error.
    Argument of type 'AngularFireList<any>' is not assignable to parameter of type 'Subscribable<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined> | Promise<any[] | Iterable<any> | (Iterable<...> & any[]) | (any[] & Iterable<...>) | undefined> | null | undefined'.
      Type 'AngularFireList<any>' is not assignable to type 'Promise<any[] | Iterable<any> | (Iterable<any> & any[]) | (any[] & Iterable<any>) | undefined>'.

18   <li *ngFor="let course of courses$ | async">
                               ~~~~~~~~

  src/app/app.component.ts:7:16
    7   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Answer 1

  db.list('/courses').subscribe(res => this.courses$ = res);

A promise is when you are awaiting for a response/answer from the asynchronous task, when you ".subscribe()" to it, you tell your code that "once you are done running this task and a response is sent, execute this code". "res" => is for response of the call. You can also do

.subscribe(res => this.courses$ = res, err => console.log(err) ); 

This will also show the errors