When the content of an mdbCollapse element is dynamically filled with *ngFor, the height is not adjusted to its content.

This results in the content of the collapsing element overlapping the element beneath.

  <i class="pull-right fa fa-angle-down" [class.rotate-180]="products.isCollapsed" (click)="products.toggle()"></i>

 <ul [mdbCollapse]="isCollapsed" #products="bs-collapse">
 <li *ngFor="let product of customer.products">{{product.name}}</li>
 </ul>

How can i create a collapsable element with dynamic content without this happening?

ps: when editing a question a cannot enter the correct version number (5.2.3)