Component is not updated when psYReachEnd event is invoked

[mdybich]

Steps to reproduce

Change example from repository:

app.component.ts

...
public test = 'clean test';

...
public onReachYEnd(): void {
    this.test = 'changed test';
  }

app.component.html

<div class="box-container" fxLayout="column" [ngStyle.lt-sm]="'min-height: 800px;'">
  <div class="app-title">{{test}}</div>
  ...
  <perfect-scrollbar 
     *ngIf="type === 'component'"
      ...
     (psYReachEnd)="onReachYEnd()"
  ></perfect-scrollbar>

Behaviour:

test is not updated on the view when onReachYEnd is invoked.

Expected Behaviour: test is updated on the view when onReachYEnd is invoked.

It was working with 5.3.5 version, but after update application to Angular 6 we can not use this version anymore.

[sconix]

With 6.x version the change detection calls were optimized. The old versions caused a lot of unnecessary Angular change detections making this wrapper bit sluggish on lower end machines. So if you need angular change detection to trigger just trigger it manually in the event handler.

[PetrasJaug]

Recently, I had a similar problem. The only difference is that I had a BehaviourSubject instead of string. Solved it by executing event code in Angular's zone explicitly:

constructor(private zone: NgZone) {}

public onReachYEnd(): void {
  this.zone.run(() => {
    this.test.emit("changed test");
  });
}

I would expect that the events (onReachYEnd and others) should be emitted by the library from within Angular's zone by default.

[sconix]

If change detection is needed it can be easily done by calling the change detector, but if the events were run on Angular zone as default there is no way to not run change detection so this would cause huge performance issues for most users. Of course the ideal solution would be to run some events such as reach end on angular zone that wont cause a performance issue and some outside like scrolling events. For that PR's are accepted, but I do not see the current way as a problem since most apps are anyway build with manual change detection to get decent performance so adding those calls to do change detection in events is not an issue.

[PetrasJaug]

Ah I see. Thanks for clarifying. Maybe there should be a note at the event part of the readme stating that the events are outside of Angular's zone. Config option would also be nice to have as it would save a lot of code in projects that heavily utilize reach events.

[sconix]

Sure those would be nice to have and maybe someday I will add such things, but specially as long as the PS itself is unmaintained I am not adding new features for this library. This is anyway just a temporary solution for us and in the end we want to have / move to pure Angular scrollbar library someday.

[huntxiao]

this.zone.run(() => { Perfect solution, Thanks