mz-collapsible-item bug

When looping through an array then modifying the array, doesn’t update the collection items.

Html:

<mz-card>
  <mz-card-content>
    <button mz-button (click)="changeValues();">Click me</button>
    <button mz-button (click)="changeValues2();">Click me</button>
    <button mz-button (click)="changeValues3();">Click me</button>
    <button mz-button (click)="changeValues4();">Click me</button>
    <mz-collapsible class="col s12" *ngIf="list.length > 0">
      <mz-collapsible-item *ngFor="let item of list">
        <mz-collapsible-item-header>
          {{item}}
        </mz-collapsible-item-header>

        <mz-collapsible-item-body>
          {{item}} body
        </mz-collapsible-item-body>
      </mz-collapsible-item>
    </mz-collapsible>
  </mz-card-content>
</mz-card>

TS:

list = ['Item1', 'Item2', 'Item3'];

constructor() {}

changeValues() {
  this.list = ['Item5', 'Item6']; // Just adds the values to the collapsible doesn't set it.
}

changeValues2() {
  this.list = ['Item7', 'Item8']; // Same as in changeValues()
}

changeValues3() {
  this.list = []; // Removes everything from the collapsible
}

changeValues4() {
  this.list = []; // Doesn't resets the collapsible items like in changeValues3()
  this.list = ['New item', 'New item2']; // Just adds these two to the collapsible
}

[scote]

Thanks you for reporting this bug. We will look to fix it in upcoming release.

[renatop7]

@caom92 this is a nice workaround actually. I ended up ditching using this collapsible, I was having a big impact in the perfomance to render them over and over again, so I created my own and was incredible easy tbh.