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.
try ngZone.run
. It will let angular rerender for latest model.