I've encountered an issue where ngOnChanges is not being called when updating a component property. To see the problem and my attempted solutions, please check out the StackBlitz linked below:
https://stackblitz.com/edit/angular-becgjq
Update: corrected link to access code details.
Highlighted code snippet
ngOnInit() {
const testButton1 = document.getElementById('test-button1');
testButton1.addEventListener('click', function() {
console.log('about to set this.value');
console.log(this.value);
this.value = 'value set by button 1';
}.bind(this));
const testButton2 = document.getElementById('test-button2');
testButton2.addEventListener('click', this.testButtonCallback2(this), false);
const testButton3 = document.getElementById('test-button3');
testButton3.addEventListener('click', this.testButtonCallback3.bind(this), false);
}
ngOnChanges() {
console.log('ngOnChanges was called');
}
testButtonCallback2(outerThis) {
return function() {
console.log('about to set this.value');
console.log(outerThis.value);
outerThis.value = 'value is set by callback2';
}
}
testButtonCallback3() {
console.log('about to set this.value');
console.log(this.value);
this.value = 'value is set by callback3';
this.changeDetectorRef.detectChanges();
}