Установите, снимите флажок, промежуточный флажок дерева в * ngFor

Question

Как я уже упоминал выше, я хочу, чтобы категория была моим родителем, и когда я выбираю категорию checkbox, она выбирает все ее дочерние элементы checkbox(items). И когда я выбираю одного конкретного потомка, категория checkbox является промежуточной. То же самое для ребенка и ребенка это размеры.

Есть какое-нибудь решение для этого?

 <ul>
        <li *ngFor="let category of menuitem">
            <span><input type="checkbox 
                   (change)="OnCheckboxSelect(category,$event)">
            </span>
            <span><a href="#{{category._id}}" data-toggle="collapse" > 
                   {{category.category_name}}</a>
            </span>
              <ul id="{{category._id}}" class="collapse">
                 <li *ngFor="let item of category?.category_item">
                    <span><input type="checkbox"   
                          (change)="OnItemSelect(item, $event)"> 
                    </span>
                     <span><a href="#{{item._id}}" data-toggle="collapse"> 
                           {{item.item_name}}</a>
                     </span>
                          <ul id="{{item._id}}" class="collapse">
                             <li *ngFor="let size of item?.item_size">
                                <span><input type="checkbox" name="">
                                </span>
                                <span>{{size.size_name}}
                                </span>
                              </li>
                           </ul>
                    </li>
                </ul>
          </li>
  </ul>