introduction

so after making a get request, we are storing all the posts the loadedPosts array and then in template HTML we are checking if array length created than 1 traverse the array and show the values .

HTML template

 <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <p *ngif="loadedPosts.length<1">No posts available!</p>
      <ul class="list-group" *ngIf="loadedPosts.length>=1">
        <li class="list-group-item" *ngFor="let post of loadedPosts">
          <h3> {{post.title }} </h3>
          <p> {{post.content}}</p>
        </li>
      </ul>
    </div>
  </div>
</div>

 private fetchPosts() {

    this.http.get< { [key:string]:Post  } >('https://ngfirstproject-default-rtdb.asia-southeast1.firebasedatabase.app/posts.json')
    .pipe( 
      map(responseData => {

      const postArray=[];

      for (const key in responseData) {
        if(responseData.hasOwnProperty(key)) {
        postArray.push( { ...responseData[key] , id:key} )
        }
      }
      return postArray;
    })

    )
    .subscribe( posts => {
        this.loadedPosts=posts;
    }
    );
  }
}