Angular - Material - Mat-Grid-List

Sample

<mat-grid-list cols="4" rowHeight="170px" gutterSize="5px">
<mat-grid-tile *ngFor="let reconcile of reconciles">
    <mat-card class="my-card">
        <mat-card-content>
        Bank Account ID - {{reconcile.bankAccountId}}<br>
        Starting Date - {{reconcile.statementStartingDate | date: 'MM/dd/yyyy'}}<br>
        Ending Date - {{reconcile.statementClosingDate | date: 'MM/dd/yyyy'}}<br>
        Beginning Bal - {{reconcile.balanceBeginning | currency:"USD":"symbol"}}<br>
        Ending Bal - {{reconcile.balanceEnding | currency:"USD":"symbol"}}<br>
        Status - {{reconcile.reconcileStatus}}<br>
    </mat-card-content>
    <mat-card-footer>
        <button mat-stroked-button 
            (click)="onRowClicked(reconcile)" 
            class='actionButton'>details
        </button>
    </mat-card-footer>
    </mat-card> 
</mat-grid-tile>
</mat-grid-list>

You can see the grid list example shows 4 columns a grid. then there is a mat-grid-tile for each item in the list. On that tag we setup the *ngFor which is used to loop through a list of records specified in the reconciles variable, which is a class level varible defined in the component. Inside the Mat-grid-tile we have a mat-card. Inside the mat-card we have a mat-card-content and a mat-card-footer. here we show the data from the reconcile class.

here is what the reconcile component class looks like.

:
import { ReconcileService } from '../reconcile.service';
import { ActivatedRoute } from '@angular/router';
import { Reconcile } from '../reconcile.model';
import { Router } from '@angular/router';
:
import { DatePipe } from '@angular/common'; 

@Component({
  selector: 'reconcile-list',
  templateUrl: './reconcile-list.component.html',
  styleUrls: ['./reconcile-list.component.css']
})

export class ReconcileListComponent implements OnInit {
  public reconciles: Reconcile[]=[];
  constructor(
    private reconcileService: ReconcileService,
    private route: ActivatedRoute,
    private router: Router,
    private commonService: CommonService,
    private datePipe: DatePipe,
  ) { 
  }

  ngOnInit() {
    this.getAllReconciles();
  }

  public getAllReconciles() {
    this.reconcileService.getAllReconciles()
                .subscribe(
                  result => {
                    console.log ("getAllReconciles succeeded");
                    console.log (result);
                    if (result.wasSuccessful === false) {
                      alert("Error trying to retrieve Reconciles");
                    } else {
                      this.reconciles = result.model;
                    }
                  }, 
                  error => {
                    alert("Error trying to retrieve Reconciles!");
                  }
    );
  }

  public onRowClicked(reconcile: Reconcile) {
    console.log("row clicked: ", reconcile);
    this.router.navigate(['/reconcile/', reconcile.id]);
  }

}