A directive I wrote does not seem to respond to changes in its @Input()
varible - the directive’s ngOnChanges()
does not fire when its @Input()
variable changes value in another component. Here’s the setup, simplified:
Directive code:
@Component({
selector: 'my-directive',
template: '<...>'
})
export class MyDirective {
@Input private value: number;
...
ngOnChanges(changeRecord) {
for (var change in changeRecord) {
if (change === 'value') {
<change stuff on page to reflect change in this.value>
}
}
}
}
Code of component that uses the directive:
@Page({
template: '<... <directive [value]="valueToCommunicate"> ...'
directives: [MyDirective]
})
export class MyPage {
...
someFunction() {
...
this.valueToCommunicate = newValue;
...
}
}
In MyDirective, ngOnChanges()
does not fire every time this.valueToCommunicate
changes inside MyPage
. The directive’s ngOnChanges()
function gets called only when either the page is resized or when another button on the page is clicked but it does not fire when no user events occur in MyPage
.
More specifically: MyPage
changes this.valueToCommunicate
as per the code above, at regular intervals, inside a loop that uses setTimeout()
. Those changes do not get communicated to the directive, unless a UI user event has happened in MyPage
.
I have a fix, for now, but it seems like a total hack and I’m concerned it would impact performance: the fix is to start another setTimeout()
loop, inside the MyDirective
and repeatedly calls, at some rate, this.ref.markForCheck()
, where this.ref
is a ChangeDetectorRef
object imported from angular2/core
.
If anybody has seen and solved this issue, could you please mention how to properly perform change detection in the directive that’s based on programmatic (non UI) changes to the communicated variable?
NOTE: this issue is similar to issue 42824 but (a) I’m not sure it’s the same issue, (b) there is no answer there. If this appears to solve the other issue, I’ll merge the two issues somehow.
NOTE: There’s a lot of relevant info here on change detection here still sifting through it…
Thanks!