Angular2 and jQuery 'change' events

You could assign a template reference variable to the <input>, like #hiddenInput1, get a hold of its native element (via @ViewChild) inside the component class and then use jQuery itself to listen to the change event.

Demo plunker here.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>My First Angular 2 App</h1>
  <hr>
  <input id='input1' hidden #hiddenInput1>
  `
})
export class AppComponent implements AfterViewInit  {

  @ViewChild('hiddenInput1') hiddenInput1:ElementRef;

  ngAfterViewInit() {
    $(this.hiddenInput1.nativeElement).on('change', (e) => {
      console.log('Change made -- ngAfterViewInit');
      this.onChange(e);
    });
  }

  onChange(): void{
    console.log('Change made -- onChange');
  }

}

Angular2 change event is added via native addEventListener.

You cannot trigger a native event with jQuery's .trigger('change'). So you will need to create a native event and dispatch it:

 const customEvent = document.createEvent('Event');  
 customEvent.initEvent('change', true, true);
 $('#input1')[0].dispatchEvent(customEvent);

This way angular2 will fire onChange handler.

Here is a demo plunker

As @Cristal Embalagens mentioned in comments you need to use input event for angular2 because DefaultValueAccessor is subscribing on this event:

@Directive({
  selector:
      'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
  host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
  providers: [DEFAULT_VALUE_ACCESSOR]
})
export class DefaultValueAccessor implements ControlValueAccessor {

Some Example