title: Displaying value from local storage in Angular Page
body: <p>This should be something trivial but I can't figure it out for the life of me.</p>
  
  <p><strong>What I need</strong> is an input field that is by default filled out for a user from a value from local Storage.</p>
  
  <p>The problem I've run into is that none of the ways I'd normally do this (jQuery onload, JS onload or a <code>(onload)</code> in the HTML tag) seem to be run when a user switches to a different page without reloading. I've also tried <code>ngOnInit()</code> but that seems to be running before the page's DOM Content is ready to be edited and isn't working here.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;form (submit)="editName($event)"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="nameInput"&gt;Name&lt;/label&gt;
      &lt;!-- I want to insert the localStorage Value user_name into this input --&gt;
      &lt;input type="name" class="form-control" id="nameInput" (onload)="initName()"&gt; 
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>A sad attempt at acheiving this is also in my component.ts:</p>
  
  <pre><code>initName() {
    document.getElementById("nameInput").textContent = localStorage.getItem('user_name');
  }
  </code></pre>
  
  <p>The error message in my console is:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'user_name' of undefined
  </code></pre>