updated demo

Author: arielfaur

src/app/tab1/tab1.page.html

@@ -39,7 +39,7 @@
       </ion-item>
     </ion-list>
 </ion-content>
-<lib-ionic-pullup (onExpand)="footerExpanded()" (onCollapse)="footerCollapsed()" (dragged)="onDrag($event)" [(state)]="footerState" [toolbarTopMargin]="100" [minBottomVisible]="200" [dockable]="true">
+<lib-ionic-pullup (onExpand)="footerExpanded()" (onCollapse)="footerCollapsed()" (dragged)="onDrag($event)" [(state)]="footerState" [toolbarTopMargin]="toolbarMargin" [minBottomVisible]="200" [dockable]="true">
 
   <ion-toolbar color="light" (click)="toggleFooter()" #ionDragFooter>
     <ion-title>Footer</ion-title>

src/app/tab1/tab1.page.ts

@@ -1,20 +1,26 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { IonPullUpFooterState, DraggedOutputEvent } from 'ionic-pullup';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss']
 })
-export class Tab1Page implements OnInit {
+export class Tab1Page implements OnInit, AfterViewInit {
   footerState: IonPullUpFooterState;
+  toolbarMargin: number;
 
   constructor() {}
 
   ngOnInit() {
     this.footerState = IonPullUpFooterState.Collapsed;
   }
 
+  ngAfterViewInit() {
+    // set top margin dynamically
+    this.toolbarMargin = 100;
+  }
+
   footerExpanded() {
     console.log('Footer expanded!');
   }