about.html

<ion-content>
  <ion-header class="ion-no-border">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="presentPopover($event)">
          <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <div class="about-header">
    <!-- Instead of loading an image each time the select changes, use opacity to transition them -->
    <div class="about-image madison" [ngStyle]="location === 'madison' && {'opacity': '1'}"></div>
    <div class="about-image austin" [ngStyle]="location === 'austin' && {'opacity': '1'}"></div>
    <div class="about-image chicago" [ngStyle]="location === 'chicago' && {'opacity': '1'}"></div>
    <div class="about-image seattle" [ngStyle]="location === 'seattle' && {'opacity': '1'}"></div>
  </div>

  <div class="about-info">
    <h3 class="ion-padding-top ion-padding-start">About</h3>

    <p class="ion-padding-start ion-padding-end">
      The Ionic Conference is a one-day conference on {{ conferenceDate | date: 'mediumDate' }} featuring talks from the Ionic team. It is focused on Ionic applications being built with Ionic Framework. This includes migrating apps to the latest version of the framework, Angular concepts, Webpack, Sass, and many other technologies used in Ionic 2. Tickets are completely sold out, and we’re expecting more than 1000 developers – making this the largest Ionic conference ever!
    </p>

    <h3 class="ion-padding-top ion-padding-start">Details</h3>

    <ion-list lines="none">
      <ion-item>
        <ion-select label="Location" [(ngModel)]="location" [interfaceOptions]="selectOptions">
          <ion-select-option value="madison">Madison, WI</ion-select-option>
          <ion-select-option value="austin">Austin, TX</ion-select-option>
          <ion-select-option value="chicago">Chicago, IL</ion-select-option>
          <ion-select-option value="seattle">Seattle, WA</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item button="true" id="open-date-input">
        <ion-label>
          Date
        </ion-label>
        <ion-text slot="end">{{ conferenceDate | date: 'mediumDate' }}</ion-text>
        <ion-popover id="date-input-popover" trigger="open-date-input" [showBackdrop]="false" side="top" alignment="end">
          <ng-template>
            <ion-datetime max="2056" [(ngModel)]="conferenceDate" presentation="date"></ion-datetime>
          </ng-template>
        </ion-popover>
      </ion-item>
    </ion-list>

    <h3 class="ion-padding-top ion-padding-start">Internet</h3>

    <ion-list lines="none">
      <ion-item>
        <ion-label>
          Wifi network
        </ion-label>
        <ion-label class="ion-text-end">
          ica{{conferenceDate | date: 'y'}}
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-label>
          Password
        </ion-label>
        <ion-label class="ion-text-end">
          makegoodthings
        </ion-label>
      </ion-item>
    </ion-list>
  </div>
</ion-content>