Loading HTML list elements partially

Question

In my Angular4 app I have a list with few thousands of li elements. li elements are showed when user clicks on ul element. Expanding such amount of li's ofcourse is hard time to browser, sometimes it takse few seconds, other time the browser gets stuck.

I am looking for smart way how to load this elements partially. I do not want to use paginantion.

<ul>
   <li *ngFor="let item of filteredData>
   <div></div> //and so on...
   </li>
</ul>

Answer 1

simply do load to some content

<div class="item active" *ngFor="#data of lengthArray;i=index">
    <div *ngIf="i<=4">
        content
    </div>
</div>

or check this out example

<ul>
  <li *ngFor="let person of people">

      <!-- HERE: add a element with click event binding -->
      <a href="#" (click)="selectPerson(person)">
        {{person.name}} 
      </a>

  </li>
</ul>

<app-person-details [person]="selectedPerson"></app-person-details>