Angular - Dropdown list optimization

Question

I have a drop down list and it's corresponding sub dropdown lists created by two *ngFors. Clicking on the main drop down list item toggles the display of its child/sub dropdown list, and clicking on the child list toggles it's content. The problem is the main list could have upto 20 items and the child lists around 1-500 items. this makes the UI very slow and unresponsive.

Is there a better way to do this? It looks like angular recreates the list each time the on click event happens.

<ul *ngfor = "let x of variable">
   <li> 
       <span (click) = "hideSudlist()"> {{x}} </span>
        //sub list
         <ul *ngfor let y of variable *ngIf=mainListHasBeenClicked()>
            <li (click) = hideChildDiv()>
               {{y}}
                <div> child content </div>
             </li>
          </ul>
   </li>
</ul>