Integrate mat-table with AngularFirestore

Question

I would like to integrate mat-table from https://material.angular.io/ with angularfire2/firestore https://github.com/angular/angularfire2, some idea, I am very lost

best regard

Answer 1

This is how you do it for simple table.

In your html file put this.

<mat-table [dataSource]="myData">

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>name</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef>description</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

In your Javascript put this

import { AngularFirestore} from 'angularfire2/firestore';

  export class MyComponent{
      displayedColumns = ['name', 'description'];    
      myData;

      constructor(private afs: AngularFirestore) {
        this.myData= new MyDataSource(this.afs);
      }

    }

    export class MyDataSource extends DataSource<any> {
      constructor(private afs: AngularFirestore) {
        super();
      }
      connect(): Observable<any[]> {
        return this.afs.collection('products').valueChanges();
      }

      disconnect() { }
    }