I'm currently working on a component that has an input text field with an attached input event listener using JQuery. My goal is to call a Typescript function when the input value changes, but unfortunately I keep encountering an uncaught TypeError.
Below is the code snippet in question:
import {Component, Input, Output, EventEmitter, ElementRef, OnInit} from 'angular2/core';
declare var jQuery: any;
@Component({
selector: 'setting-priority',
template: '<input [(ngModel)]="priority" class="setting-priority" type="text">'
})
export class SettingPriorityComponent implements OnInit{
@Input() priority: number;
@Output() prioChanged: EventEmitter<number> = new EventEmitter();
constructor(private elementRef:ElementRef) { }
ngOnInit() {
jQuery(this.elementRef.nativeElement).find('input').on('input', function() {
// Call the onChange function when input value changes
this.onChange();
});
}
ngOnChanges(changes) {
this.prioChanged.emit(this.priority);
}
// Update the priority variable with the received value
onChange() {
console.log("onchange!");
}
}
The reason for using Jquery in this scenario is because the input value will be set programmatically - which causes Angular's Change Detection mechanism to not work correctly Additional details here
However, whenever the input event is triggered, it results in an Uncaught TypeError: this.onChange is not a function
Can someone please point out what mistake I might be making?