Angular 4 How wait for loaded all images - image

Question

I using ui-routing for NG4 (each section is different ui-view).
In some section I use (waypoint.js - imakewebthings.com/waypoints/) with ngZone and I need wait for load all images and videos (in all ui-view in page) to get true page height. Is it posible and if is how can I do this?
Something like addEventListener('load', ...) not working because I have got some pages (each have multiple sections (ui-view)) and it's work only for first open page.
My code:
My page container (similar for evry page)
<ui-view name="header"></ui-view>
<ui-view name="moving-car"></ui-view>
<ui-view name="aaa"></ui-view>
<ui-view name="bbb"></ui-view>
for example moving-car component:
<section class="moving-car" id="moving-car" [ngClass]="{'is-active': isActive}">
<!-- content -->
</section>
TS:
import { Component, OnInit, AfterViewInit, OnDestroy, NgZone,
ChangeDetectorRef } from '#angular/core';
declare var Waypoint: any;
import 'waypoints/lib/noframework.waypoints.js';
#Component({
selector: 'app-avensis-moving-car',
templateUrl: './avensis-moving-car.component.html',
styleUrls: ['./avensis-moving-car.component.scss']
})
export class AvensisMovingCarComponent implements OnInit, OnDestroy, AterViewInit {
constructor(
private $zone: NgZone,
private ref: ChangeDetectorRef
) {}
private waypoint: any;
public isActive: boolean = false;
ngOnInit() {}
ngAfterViewInit(): void {
const activate = () => {
this.isActive = true;
this.ref.detectChanges();
};
this.$zone.runOutsideAngular(
() => {
/* this code below I want run after loaded all image in my
subpage (not only in this component) */
this.waypoint = new Waypoint({
element: document.getElementById('moving-car'),
handler: function (direction) {
activate();
this.destroy();
},
offset: '70%'
});
}
);
}
ngOnDestroy() {
this.waypoint.destroy();
}
}

Answer 1

I modify my ngAfterViewInit function and now it's look like working but I not sure if this is good way to resolve my problem
ngAfterViewInit(): void {
const activate = () => {
this.isActive = true;
this.ref.detectChanges();
};
const images = document.querySelectorAll('img');
let counter = 0;
for (let i = 0; i < images.length; i++) {
images[i].addEventListener('load', () => {
console.log('image loaded');
if (++counter === images.length) {
this.$zone.runOutsideAngular(
() => {
this.waypoint = new Waypoint({
element: document.getElementById('moving-car'),
handler: function (direction) {
activate();
this.destroy();
},
offset: '70%'
});
}
);
}
}, false);
}
}