HTMLのchangeイベントを強制発火させる

次のような処理をした場合changeイベントは発火するのか

<!--HTML (Angular)-->
<div>
    <input type="text" id="hoge" (change)="hogeEvent()">
</div>

//TypeScript (Angular)

(document.getElementById('hoge') as HTMLInputElement).value = huga;

確認してみましたが、残念ながら発火してくれませんでした。というわけで次の行をTypeScriptに追加してあげましょう。

//TypeScript (Angular)

let event = new Event('change');
(document.getElementById('wegpunkte') as HTMLInputElement).dispatchEvent(event);

new Event('change')を生成してdispatchEventで発火させることで、changeと対応するイベント(例のコードではhogeEvent)が実行されます。

もし親要素にもchangeイベントがあって発火させたいのであれば、bubblesオプションで

let event = new Event('change',{bubbles:true});

と追加してあげれば祖先に当たる要素でも実行されます。