How to display ngFor under a certain element of another ngFor?

Question

Angular

There is such a code

<div class="middle-content" *ngFor="let year of years">
    <a class="middle-content_top-indent" (click)="log(year)">{{year}}</a>
    
    <ul class="list-of-month" *ngFor="let month of months">
      <li>
        <span class="list-of-month__marker"></span>
        <a href="#">{{month}}</a>
      </li>
    </ul>
</div>

That is, the enumeration of years, and under each year the enumeration of months:

You need to display the enumeration of months, only under a certain year.
How to do it?

Answer 1

As far as I understand, the list of months should expand by clicking on the year. Add the activeYear property, make the appropriate assignment in the click handler, and add to the list of months (by the way, you have a bug there - the list element is not ul, but li, so ngFor should be moved) add *ngIf="year === activeYear". Like so .