speaker-list.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Speakers</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Speakers</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-grid fixed>
    <ion-row>
      <ion-col size="12" size-md="6" *ngFor="let speaker of speakers">
        <ion-card class="speaker-card">
          <ion-card-header>
            <ion-item detail="false" lines="none" class="speaker-item" routerLink="/app/tabs/speakers/speaker-details/{{speaker.id}}">
              <ion-avatar slot="start">
                <img [src]="speaker.profilePic" [alt]="speaker.name + ' profile picture'">
              </ion-avatar>
              <ion-label>
                <h2>{{speaker.name}}</h2>
                <p>{{speaker.title}}</p>
              </ion-label>
            </ion-item>
          </ion-card-header>

          <ion-card-content>
            <ion-list lines="none">
              <ion-item *ngFor="let session of speaker.sessions" detail="false" routerLink="/app/tabs/speakers/session/{{session.id}}">
                <ion-label>
                  <h3>{{session.name}}</h3>
                </ion-label>
              </ion-item>

              <ion-item detail="false" routerLink="/app/tabs/speakers/speaker-details/{{speaker.id}}">
                <ion-label>
                  <h3>About {{speaker.name}}</h3>
                </ion-label>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>