loadcomponentondemand.js

import { Component, HostListener, OnInit, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  count = 0;
  caddedarray: string[] = [];

  @HostListener('window:scroll', []) onScroll(e: Event): void {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      this.count = this.count + 1;
      this.loadChildComponents(this.count);
    }
  }

  constructor(private vcref: ViewContainerRef) { }

  ngOnInit(): void {
  }

  async loadChildComponents(count: number) {

    if (count > 1 && count < 3) {
      let cindex = this.caddedarray.findIndex(t => t == "c3");
      if (cindex == -1) {
        const { Child3Component } = await import('../child3/child3.component');
        let child3 = this.vcref.createComponent(Child3Component)
        this.caddedarray.push("c3");
      }

    }
    else if (count > 3 && count < 5) {
      if (this.caddedarray.findIndex(t => t == "c4") == -1) {
        const { Child4Component } = await import('../child4/child4.component');
        let child4 = this.vcref.createComponent(Child4Component);
        this.caddedarray.push("c4");
      }

    }
    else if (count > 5 && count < 7) {
      if (this.caddedarray.findIndex(t => t == "c5") == -1) {
        const { Child5Component } = await import('../child5/child5.component');
        let child5 = this.vcref.createComponent(Child5Component);
        this.caddedarray.push("c5");
      }
    }


  }

}