DOM not updating from component variable in real time

Ionic Framework ionic-v3
1

I have a scroll listener in my pages component which observes the content scroll event and updates variables on the component.

this.content._scroll.scroll.asObservable().subscribe((event) => {
  console.log(event.scrollTop);
  var scrollInRem = event.scrollTop / 14;
  this.newHeight = this.initialHeight - scrollInRem;
  if (this.newHeight <= 8) {
    this.newHeight = 8;
  }

  this.newMargin = this.initialMargin - scrollInRem * 0.4;
  if (this.newMargin <= 0.5) {
    this.newMargin = 0.5;
  }
});

These variables are accessed in the view with:

[ngStyle]="{'margin-top': getMargin()}"

  initialMargin: number = 5;
  newMargin: number = this.initialMargin;
  getMargin = function () {
    return this.newMargin + "rem";
  }

However recently after updating to RC-4, the new style is not applied to the element all the way through the scroll event, and only applies at the end (or when a new touch or scroll event begins). I know that the observable is getting hit all the time throughout the scroll as the positions are getting logged… anyone know why the view isn’t updating?

2

I think this is the old type of syntax before angular 2 got released

I use this [style.transform]=" 'translate3d(0,' + this.distanceDown + 'px,0)'"

also I use it to scale views/elements

[style.transform]="(margin_left<100&&margin_left>0)?'scale('+margin_left/100+')':'scale(1)'"

I hope it works for you

3

Thanks for your reply. Both [ngStyle] and [style.prop] seem to have the same outcome. I think it is a problem with the view not listening to the updates fast enough as opposed to the property binding, not sure how to completely diagnose it though.