Angular2 how to initialize a component when it becomes visible

Question

The webpage that I want to create must have a lot of blocks (angular2 components). So I want to initialize only couple of them (which would be visible from the beginning) and others would be initialized later (for example when user scrolls, so I will save call by network which loads data and the rendering of the page would be much faster).

It is something like AMP (I know that AMP and Angular2 are totally different). For example on page https://www.bucketlist127.com/blog/ideas-for-bucket-list images are being loaded when user scrolls the page which makes the page much smaller (very important for mobile devices).

I tried to catch an event when the component becomes visible, but seems there is not a angular2 native event for this (ngOnInit, ngOnDestroy, ngDoCheck, ngOnChanges, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked)

The question is: is there any good practice for this?

Answer 1

I'd say after the onOnInit , if you listen to any event after that , like ngAfterViewInit and ... , you can be sure that your view is visible , unless there is something preventing it , like a css class or whatever.