JavaScript trigger an AngularJS input change event from external JavaScript

Use the dispatchEvent JavaScript function to trigger a form field's input event on a page that is using Angular.

This "input" trigger event was needed on an Angular 9.1.12 page:

function triggerInput(element) {
        new window.Event('input', { bubbles: true })


var nameInputField = document.querySelector('#name');
nameInputField.value = 'Alice';

Other events may be similarly triggered:

function triggerMouseEvent(element, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent(eventType, true, true);

var myButton = document.querySelector('button');
triggerMouseEvent(myButton, 'mousedown');
triggerMouseEvent(myButton, 'mouseup');


  1. anonymous

    Thank you so much for this!!!

    1. Zach

      you're welcome!

Leave a Reply