Angular *ngFor & Materialize-CSS Collapsible Not working

Question

I'm using Materialize-CSS collapsibles inside my project and I'm trying to put a collapsible inside of another. If I remove the first *ngFor inside ng-container, then it works just fine, but once I add the *ngFor loop it will not work. Any help is appreciated! I attached the simplified code & a photo below

<ul class="collapsible" data-collapsible="expandable">
  <ng-container *ngFor="let month of months">
  <li >
    <div class="collapsible-header">
      <span><i class="material-icons">date_range</i> &nbsp;<strong>{{month | amDateFormat: 'MMMM YYYY'}}</strong></span>
    </div>
    <div class="collapsible-body">
      <ul class="collapsible" data-collapsible="expandable">  
        <li *ngFor="let feeding of feedings | orderBy: 'date'">
          <ng-container *ngIf="(month | amDateFormat: 'MMM YYYY') == (feeding.date | amDateFormat: 'MMM YYYY')">
            <div class="collapsible-header valign-wrapper">
              <span><i class="material-icons">today</i> &nbsp;<strong>{{feeding.date | amDateFormat:'MMMM Do YYYY'}}</strong></span>
            </div>
            <div class="collapsible-body">
              ...
            </div>
          </ng-container>
        </li>
      </ul>
    </div>
  </li>
</ng-container>
</ul>

Here is a photo showing what I want The bottom collapsible "Month" is working correctly. The top one has the *ngFor loop and will not open the inside collapsibles

Thank you!

Answer 1

I was able to install angular2-materialize & hammerjs to my app and then change the ul tags

<ul class="collapsible" data-collapsible="accordion" materialize="collapsible">

I added materialize="collapsible" to both ul's and that fixed it!