Observable object as argument in footer

Ionic Framework ionic-v3
1

Hello,

I’m using AngularFire2 for saving my data.
I’m trying to create a detail page with update methods.

I’m trying this:

<ion-header>
  <ion-navbar>
    <ion-title>Notitie details</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
  <ion-list *ngIf="(note | async) as noteObj" no-lines>
    <ion-list-header>
      Informatie
    </ion-list-header>
    <ion-item>
      <ion-label floating>Notitie</ion-label>
      <ion-textarea [(ngModel)]="noteObj.text" readonly="true"></ion-textarea>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col col-6>
          <button ion-button block color="danger" (click)="delete(noteObj)">Verwijderen</button>
        </ion-col>
        <ion-col col-6>
          <button ion-button block (click)="update(noteObj)">Bijwerken</button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>

But in my delete and update function the given argument is undefined.
I know why, the noteObj is declared on the ion-list, which is not the parent of ion-footer.
But I cannot place the ion-footer into the ion-content because whenever the content becomes scrollable, the ion-footer will float in the middle of the screen.

Because the note object is an observable I have to declare it in the template is a variable so due the binding in the ion-textarea it will change the text property.

I’ve allready tried to put a div around the ion-content & ion-footer but then screen gets black on page load…
Can anyone help me with this?