schedule.html

<ion-header translucent="true">
  <ion-toolbar>
    <ion-buttons *ngIf="!showSearchbar" slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-segment *ngIf="ios" [(ngModel)]="segment" (ionChange)="updateSchedule()">
      <ion-segment-button value="all">
        All
      </ion-segment-button>
      <ion-segment-button value="favorites">
        Favorites
      </ion-segment-button>
    </ion-segment>
    <ion-title *ngIf="!ios && !showSearchbar">Schedule</ion-title>
    <ion-searchbar *ngIf="showSearchbar" showCancelButton="always" [(ngModel)]="queryText" (ionInput)="updateSchedule()" (ionCancel)="showSearchbar = false" placeholder="Search"></ion-searchbar>
    <ion-buttons slot="end">
      <ion-button *ngIf="!ios && !showSearchbar" (click)="showSearchbar = true">
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
      <ion-button *ngIf="!showSearchbar" (click)="presentFilter()">
        <span *ngIf="ios">Filter</span>
        <span *ngIf="!ios">
          <ion-icon slot="icon-only" name="options"></ion-icon>
        </span>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar *ngIf="!ios">
    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
      <ion-segment-button value="all">
        All
      </ion-segment-button>
      <ion-segment-button value="favorites">
        Favorites
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Schedule</ion-title>
    </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar [(ngModel)]="queryText" (ionInput)="updateSchedule()" placeholder="Search"></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  <ion-list #scheduleList [hidden]="shownSessions === 0">
    <ion-item-group *ngFor="let group of groups" [hidden]="group.hide">
      <ion-item-divider sticky>
        <ion-label>
          {{group.time}}
        </ion-label>
      </ion-item-divider>

      <ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase"
        [hidden]="session.hide">
        <ion-item routerLink="/app/tabs/schedule/session/{{session.id}}">
          <ion-label>
            <h3>{{session.name}}</h3>
            <p>
              {{session.timeStart}} &mdash; {{session.timeEnd}}: {{session.location}}
            </p>
          </ion-label>
        </ion-item>
        <ion-item-options>
          <ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
            Favorite
          </ion-item-option>
          <ion-item-option color="danger" (click)="removeFavorite(slidingItem, session, 'Remove Favorite')"
            *ngIf="segment === 'favorites'">
            Remove
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-item-group>
  </ion-list>

  <ion-list-header [hidden]="shownSessions > 0">
    No Sessions Found
  </ion-list-header>

  <ion-fab slot="fixed" vertical="bottom" horizontal="end" #fab>
    <ion-fab-button>
      <ion-icon name="share-social"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button color="vimeo" (click)="openSocial('Vimeo', fab)">
        <ion-icon name="logo-vimeo"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="instagram" (click)="openSocial('Instagram', fab)">
        <ion-icon name="logo-instagram"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="twitter" (click)="openSocial('Twitter', fab)">
        <ion-icon name="logo-twitter"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="facebook" (click)="openSocial('Facebook', fab)">
        <ion-icon name="logo-facebook"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>