2.2.0

Updated module to work with Ionic 2 final

BREAKING CHANGES

• Needs to add module to tsconfig.json to tell the compiler to transpile the module

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "files": [
    "node_modules/ionic-pullup/dist/index.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

• Import module into app's root module

import { IonPullupModule } from 'ionic-pullup/dist';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    IonPullupModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}

• Create a two-way binding variable that controls the footer state from your component

import { IonPullUpFooterState} from 'ionic-pullup/dist';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  footerState: IonPullUpFooterState;

  constructor(public navCtrl: NavController) {
    this.footerState = IonPullUpFooterState.Collapsed;
  }

  footerExpanded() {
    console.log('Footer expanded!');
  }

  footerCollapsed() {
    console.log('Footer collapsed!');
  }

  toggleFooter() {
    this.footerState = this.footerState == IonPullUpFooterState.Collapsed ? IonPullUpFooterState.Expanded : IonPullUpFooterState.Collapsed;
  }
}

• Add ionic-pullup components to the view

<ion-pullup (onExpand)="footerExpanded()" (onCollapse)="footerCollapsed()" [(state)]="footerState">
  <ion-pullup-tab [footer]="pullup" (tap)="toggleFooter()">
    <ion-icon name="arrow-up" *ngIf="footerState == 0"></ion-icon><ion-icon name="arrow-down" *ngIf="footerState == 1"></ion-icon>
  </ion-pullup-tab>
  <ion-toolbar color="primary" (tap)="toggleFooter()">
    <ion-title>Footer</ion-title>
  </ion-toolbar>
  <ion-content>
   ... FOOTER CONTENT...
  </ion-content>
</ion-pullup>