title: accessing a basic input field from typescript
body: <p>This has been driving me nuts.</p>
  
  <p>got a hidden input box as follows
  <code>&lt;input type='hidden' id='iFrameDrivenImageValue' value='n/a'&gt;</code></p>
  
  <p>And I'm trying to read its value from .ts to submit to DB. 
  But cannot compile the TS. Stopped by an error that reads like this:
  <code>ERROR in /Users/...component.ts (4773,89): Property 'value' does not exist on type 'HTMLElement'.</code></p>
  
  <p>tried
  <code>&lt;HTMLInputElement&gt;document.getElementById("iFrameDrivenImageValue").value</code>;</p>
  
  <p>tried
  <code>&lt;HTMLInputElement&gt;document.getElementById("iFrameDrivenImageValue")?.value</code>;</p>
  
  <p>tried
  <code>theForm.form.controls['iFrameDrivenImageValue'].value</code>;</p>
  
  <p>When I step thru with the chrome's debugger, the console got no problems spitting out the value of <code>document.getElementById("iFrameDrivenImageValue").value</code> as 'n/a'. </p>
  
  <p>How can I get TS also see the same thing? Or at least cool it off so I can compile the darn script? </p>
  
  <p>Someone may ask why not go banana in the box and bind it two-way? 
  Well, the reason I am flirting with this mickey mouse way of trying to get to the value is because Angular does not see the change within an ngForm input field (when an iFrame script updates the value within that input field ). Go Figure! </p>
  
  <p>As far as Angular is concerned, that iframe driven/changed value within the ngForm is still pristine and the theForm.form.controls is unaware of its recently updaed value. </p>
  
  <p>Since all of these efforts failed, I was forced to try to go old-school way, but cannot get TS compile. </p>