How do I save a filled value in a textfield to a SQL lite database in Ionic 6/Capacitor?

On Ionic 6, I'm learning how to create a SQL lite database. I have a use case in which I want the user to enter a value into the distance textfield. The value appears on the next page, and I want to save it to the database.

This is my home file with just one simple textfield.

Home.html

<ion-header [translucent]="true">
  <ion-toolbar class="app-theme-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      SQL Lite Tutorial
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-grid>    
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label position="floating">Distance</ion-label>
          <ion-input [(ngModel)]="geodata.distance"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>   
    <ion-row>
      <ion-col>
        <ion-button class="app-theme-color" (click)="navigateToResultPage()" expand="full" shape="round">Result
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

The value appears on the next page after the user clicks the button.

Result.html

<ion-header>
  <ion-toolbar class="app-theme-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Result</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>    
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
             <p [(ngModel)]="faveroute.distance">Distance: </p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>   
    <ion-row>
      <ion-col>
         <ion-button class="app-theme-color" (click)="addRouteToFavorite()" expand="full" shape="round">Save to
      favorites</ion-button>
      </ion-col>
    </ion-row>  
    <ion-row>
      <ion-col>
        <ion-button class="app-theme-color" (click)="navigateToHomePage()" expand="full" shape="round">Back</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

This is my method I use to add the value to the database. I use a service called DatabaseService.

result.ts

faveroute: RouteInterface;


 addRouteToFavorite() {
    this.dataBaseService.addFavoriteRoute(this.faveroute['distance'])
      .then(data => {
        this.faveroute = { id: ??, distance: this.distance };
      });
  }

And this is my method from the service.

DatabaseService.ts

  addFavoriteRoute(distance) {
    let data = [distance];
    return this.database.executeSql('INSERT INTO favoriteroutes (distance) VALUES (?)', data).then(data => {
      this.getAllFavoriteRoutes();
    });
  }

In the DatabaseService I declare a interface like this.

export interface RouteInterface {
  id: number,
  distance: number
}

And this is my SQL script I use:

CREATE TABLE IF NOT EXISTS favoriteroutes(id INTEGER PRIMARY KEY AUTOINCREMENT, distance INTEGER);
INSERT or IGNORE INTO favoriteroutes VALUES (1, 56);
INSERT or IGNORE INTO favoriteroutes VALUES (2, 34);
INSERT or IGNORE INTO favoriteroutes VALUES (3, 234);   

The database is operational. In my app, I can see the test data. However, when I try to add a new item from the results page, I receive an error.

Error I get in the android studio console:

ERROR TypeError: Cannot read properties of undefined (reading 'distance')

There are numerous tutorials on the internet for adding it from a textfield. However, in this use case, I want to add the value AFTER the user's input.

How can I add the distance property in my database?

from How do I save a filled value in a textfield to a SQL lite database in Ionic 6/Capacitor?