title: Angular 6: Programmatically changing value of input element in production environment
body: <p>I am using a Angular 6 js script which I purchased without access to the underlying readable code. The js code I can see is webpack. I want to make a few small additions with plain js or jq. Specifically, I want to programmatically set values of input elements. In jq: <code>$(selector).val(value)</code>. As I don't have access to the source code, I must add a custom js script to manipulate the input.</p>
  <p>This is what I have tried:</p>
  <ul>
  <li>Selecting the element and dispatch a click-keyboardevent to select it. Then I repeatedly fired keyboard events with the characters I wanted to enter as input. As I
  learned from
  <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent</a>,
  manually firing a keyboard event will not result in the default
  behavior. So this let to nothing.</li>
  <li>Following <a href="https://stackoverflow.com/questions/44973202/how-to-update-a-angular-4-form-values-using-console-devtools">How to update a angular 4+ form values using console devtools?</a> was also a dead end because the script is in production so ng.probe()
  doesn't work.</li>
  <li>I managed to attach listeners to a few custom events that I could distill from the webpack code but none of them got me any further.</li>
  <li>And, of course, I tried all shapes and forms of
  <code>$(selector).val(value)</code>, both in jq and in plain js. All to no
  avail.</li>
  </ul>
  <p>Any other suggestions how to go about this?</p>