ionic-framework/ionic/components/app/test/sink/pages/pull-to-refresh.ts

import {NgFor, Component, Directive, View} from 'angular2/angular2';

import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
  NavbarTemplate, Navbar, NavController, Content, Refresher} from 'ionic/ionic';

import {SinkPage} from '../sink-page';

@Component({
  selector: 'ion-view'
})
@View({
  template: `
  <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Pull to Refresh</ion-title></ion-navbar>

  <ion-content>
    <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
    </ion-refresher>
    <ion-list inset>
      <ion-item *ng-for="#item of items">
        {{item.title}}
      </ion-item>
    </ion-list>
  </ion-content>
  `,
  directives: [NgFor, NavbarTemplate, Navbar, Content, List, Item, Refresher]
})
export class PullToRefreshPage extends SinkPage {
  constructor(app: IonicApp) {
    super(app);

    this.items = [];
    for(let i = 90; i < 100; i++) {
      this.items.push({
        title: i
      });
    }
    this.i = 90;
  }
  doRefresh(refresher) {
    console.log('DOREFRESH', refresher)

    this.items.unshift({
      title: (--i)
    });

    setTimeout(() => {
      refresher.complete();
    }, 1500)
  }
  doStarting() {
    console.log('DOSTARTING');
  }
  doPulling(amt) {
    console.log('DOPULLING', amt);
  }
}