title: Angular2 how to initialize a component when it becomes visible
body: <p>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).</p>
  
  <p>It is something like <strong>AMP</strong> (I know that AMP and Angular2 are totally different). For example on page <a href="https://www.bucketlist127.com/blog/ideas-for-bucket-list" rel="nofollow noreferrer">https://www.bucketlist127.com/blog/ideas-for-bucket-list</a> images are being loaded when user scrolls the page which makes the page much smaller (very important for mobile devices).</p>
  
  <p>I tried to catch an event when the component becomes visible, but seems there is not a angular2 native event for this (<strong>ngOnInit, ngOnDestroy, ngDoCheck, ngOnChanges, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked</strong>)</p>
  
  <p>The question is: <strong>is there any good practice for this?</strong></p>