title: Firebase Firestore displaying [object, object] instead of document data. How to fix?
body: <p>I have an app that takes in user input and uploads to firebase firestore. When i retrieve the documents from the firestore to display on another page on the app using a component  it is displaying [object, object] the data i enter to firebase manually is displaying. I am unsure how to fix this any suggestions would be helpful.</p>
  <pre><code>      export interface Item{
          id?: string, 
          createdAt: number,
           title: string,
         description:string,
         carType:string,
         typeID: number,
         color: string,
         colorId: number
         }
  
     //item.service.ts
     export class ItemService {
  
      //property of items collection
      itemsCollection: AngularFirestoreCollection&lt;Item&gt;;
  
       items: Observable&lt;any[]&gt;;
  
  
     constructor(public fsDb: AngularFirestore) { 
       this.items = this.fsDb.collection('complete- 
         entry').valueChanges();
  
      }
  
       getItems(){
       return this.items;
        }
       }
  
     //items.component.ts
       export class ItemsComponent implements OnInit {
  
          items: Item[];
       constructor(private itemService: ItemService) { }
  
        ngOnInit() {
          this.itemService.getItems().subscribe(items=&gt;{
             console.log(items);
           
             this.items = items;
              })
               }}
        //items.component.html
  
           &lt;div *ngIf=&quot;items?.length &gt;0;else noItems&quot;&gt;
             &lt;ion-list *ngFor=&quot;let items of items&quot; class=&quot;collection&quot;&gt;
          &lt;ion-item class=&quot;collection-item&quot;&gt;
            &lt;strong&gt;{{items.title}}: &lt;/strong&gt;{{items.description}}  &lt;br&gt;
           &lt;/ion-item&gt;
  
           &lt;/ion-list&gt;
         &lt;/div&gt;
         &lt;!-- if there are not items display --&gt;
     &lt;ng-template #noItems&gt;
          &lt;hr&gt;
       &lt;h5&gt;There are no items to display&lt;/h5&gt;
     &lt;/ng-template&gt;
  </code></pre>