My app-component has quite a number of child components that do not all come into the viewport at once. I would not like to load all the components at once since most of the times the users may not need to scroll to the bottom. So is there a way to lazy load the child components only if they are into the viewport/close to the viewport?
Here's my code of app-component template:
<!--Header-area-->
<header class="relative header-area" id="home">
<div class="header-bg header-bg-color">
<div class="header-bg-image header-bg-image1 home-parallax"></div>
</div>
<!--Mainmenu-area-->
<app-mainmenu></app-mainmenu>
<!--Mainmenu-area/-->
<div class="header-scroll-btton smoth">
<a href="#about"><span class="ti-arrow-down"></span></a>
</div>
</header>
<!--Header-area/-->
<!--About-area-->
<app-about></app-about>
<!--About-area/-->
<!--Facilities-area-->
<app-facilities></app-facilities>
<!--Facilities-area/-->
<!--Staff-area-->
<app-staff></app-staff>
<!--Staff-area/-->
<!--Administration-area/-->
<app-administration></app-administration>
<!--Administration-area/-->
<!--Gallery-Area-->
<app-gallery></app-gallery> //This is very expensive to load
<!--Gallery-Area/-->
<!--News-Area-->
<app-news></app-news>
<!--News-Area/-->
<!--Contact-Area-->
<app-contact></app-contact>
<!--Contact-Area-->
<!--Footer-area-->
<app-footer></app-footer>
<!--Footer-area/-->