angularrxjs-dom

Rxjs-DOM load function does not fire angular 2


I am currently working on a Angular 2 project where I need to call specific functions only and only after ALL the elements on the page are loaded. I tried to use eventFrom function from Observable, it worked when I was expecting a 'click' operation, but once I switched to 'load" it did not fire at all. Next I tried to use Rxjs-DOM load function and it does not fire either.

Here is the code I have right now:

ngAfterViewInit(): void {
  let input = this.container.nativeElement.getElementsByClassName('list-item');

  let source = Rx.DOM.load(input);

  let subscription = source.subscribe((x) => {
      console.log('Next!');
    },
    (err) => {
      console.log('Error: ' + err);
    },
    () => {
      let temp = this.container.nativeElement.getElementsByClassName('list-item');
      console.log(temp.length);
    });

}
<div class="list-wrapper">
  <div class="list">
    <div class="list-item" *ngFor="let item of items">
      <img src={{item.image}} alt="{{item.title}}">
    </div>
  </div>
</div>

 "@angular/core": "4.0.1",
    "@types/rx-dom": "^7.0.0",
    "angular2-infinite-scroll": "0.3.4",
    "gulp-run": "1.7.1",
    "rxjs": "5.2.1-smooth"

temp.length is always 0. If I set a timeout there it will work perfectly as all the elements get 2-3 seconds to load and then temp is not empty. But timeout is not desirable in this case. Is there anything I am doing wrong? Another questions is if there is any other way in Angular 2 to call functions only after all the dom elements are ACTUALLY loaded.

Thank you in advance.


Solution

  • try ngZone.run. It will let angular rerender for latest model.