notes-list.page.html

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>Notes</ion-title>
      <ion-buttons slot="end">
        <ion-button slot="icon-only" (click)="signout()">
          <ion-icon name="log-out-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button routerLink="/note">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <ion-grid fixed>
      <ion-row >
        <ion-col
          *ngFor="let note of (notes | async)"
          size-xl="2"
          size-lg="3"
          size-md="4"
          size-sm="6"
          size="12"
        >
          <div>
            <ion-card>
              <ion-card-header color="{{note.colorTag}}"
                >{{note.title}}
              </ion-card-header>
              <ion-card-content button [routerLink]="['/note', note.id]">
                {{[getShortBody(note.body)]}}
              </ion-card-content>
            </ion-card>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
</ion-app>