Angular 6: Programmatically changing value of input element in production environment

Question

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: $(selector).val(value). As I don't have access to the source code, I must add a custom js script to manipulate the input.

This is what I have tried:

• 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 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent, manually firing a keyboard event will not result in the default behavior. So this let to nothing.
• Following How to update a angular 4+ form values using console devtools? was also a dead end because the script is in production so ng.probe() doesn't work.
• 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.
• And, of course, I tried all shapes and forms of $(selector).val(value), both in jq and in plain js. All to no avail.

Any other suggestions how to go about this?

Answer 1

After some trial and error, I found this to be working for Angular 12:

const input = document.querySelector(selector);
input.value = value;
input.dispatchEvent(new Event("input"));

In jQuery this would be something like:

$(selector).val(value).trigger("input");