gist.list.component.html

<div fxLayout="column" fxFlex>
  <!-- We list the last 5 saved gists -->
  <div fxFlex="100">
    <div fxFlex="30"> </div>
    <div fxFlex="40">
      <!-- three line densed list -->
      <mat-list dense>
        <mat-list-item *ngFor="let gist of gists">
          <h3 matLine> <b>{{gist.title}}</b> </h3>
          <p matLine> {{gist.description}} </p>
          <p matLine> {{gist.technologies}} </p>

          <button mat-icon-button (click)="show(gist._id)">
            <mat-icon class="md-24">visibility</mat-icon>
          </button>
        </mat-list-item>
      </mat-list>
    </div>
    <div fxFlex="30"> </div>
  </div>

  <div fxLayout="row" fxLayoutAlign="center center">
      <button mat-fab (click)="addGist()"><mat-icon>add</mat-icon></button>
  </div>
</div>