title: Trying to update html dynamically in typescript
body: <p>I have an html file that lists the latitudinal position of a user. I can currently update the html text when I click a button, which calls a typescript function. What I want is for my function to be called onload, updating the text before the page is even fully loaded. I have tried using the onload function, but have had no luck. Here is my html, assuming I cleaned up my code correctly it should be reproducible:</p>
  
  <pre><code>&lt;ion-app&gt;
    &lt;ion-content [fullscreen]="true"&gt;
      &lt;div id="container"&gt;
        &lt;h1&gt;Go-To-Gate Reminder&lt;/h1&gt;
        &lt;div class="row"&gt;
          &lt;ion-icon size="large" name="walk"&gt;&lt;/ion-icon&gt;
          &lt;p&gt; Walking speed &lt;/p&gt;
          &lt;text id="updater"&gt;&lt;/text&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ion-content&gt;
  &lt;/ion-app&gt;
  </code></pre>
  
  <p>and here is my ts file:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Geolocation } from '@ionic-native/geolocation/ngx';
  
  @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
  })
  export class HomePage {
      framework = 'At exact boarding time';
  
      constructor(private geolocation: Geolocation) {}
  
  // use geolocation to get user's device coordinates
  getCurrentCoordinates() {
      this.geolocation.getCurrentPosition().then((resp) =&gt; {
          this.latitude = resp.coords.latitude;
          this.longitude = resp.coords.longitude;
      }).catch((error) =&gt; {
          console.log('Error getting location', error);
      });
  
      document.getElementById("updater").innerHTML = '&amp;nbsp' + this.latitude
  }
  </code></pre>