MZCollapsibleComponent: "close is not a function" when called through ViewChildren

[nandekonst]

This report is missing a working code-running example currently. If I have time later this week I will add one. All relevant code is found in the example snippets below.

We try to close an "mz-collapsible" programmatically. There are multiple, each having a single collapsible item. To accesss them, we used a template variable like "#collapsibleProgrammatically", added IDs to the collapsible items and declared ViewChildren for a list of MZCollapsibleComponent in the TS.

Then we made a close button which provides information to find the correct collapsible item. (for loop etc.) We have that code working and it gives us an MZCollapsibleComponent with what seems to be, correct data.

Expected behaviour is of course the closing of the collapsible, if you call the close function.

Current behaviour is: we call the close(0) function on the MZCollapsibleComponent and get an error

ERROR TypeError: element.close is not a function

Workaround:

When we use the data inside the ViewChildrens MZCollapsibleComponent to create a new instance of MZCollapsibleComponent, we CAN get the expected behaviour, which is really weird.

HTML snippet:

. . .
<div *ngFor="let item of items">
. . .
                <mz-collapsible #collapsibleProgrammatically
                      [mode]="'expandable'"
                      [popout]="true">
                  <mz-collapsible-item [active]="false" id="mytag_{{item.id}}">
. . .
                    <mz-collapsible-item-body>
. . .
                      <button (click)="closeCollapsible(item.id)">Close</button> 
                    </mz-collapsible-item-body>
                  </mz-collapsible-item>
                </mz-collapsible>
</div>
. . .

TS snippet:

. . .
import { MzCollapsibleComponent } from 'ngx-materialize';
. . .
export class MyAppComponent . . . {
  @ViewChildren('collapsibleProgrammatically') collapsibleChildren: QueryList<MzCollapsibleComponent>;
. . .

  closeCollapsible(itemID){

    console.log("ID COLLAP" + itemID);

    let elementId = "mytag_" + itemID;

    this.collapsibleChildren.forEach(function(element){
      console.log(element);
      console.log(element.items.first);
      if(element.items.first.elementRef.nativeElement.id == elementId){

        element.close(0)

//If you uncomment the code below and comment the above 'element.close(0)', we get expected behaviour. We have defined onClose and onOpen callbacks in our code but they should make no difference.
         /* let test: MzCollapsibleComponent = new MzCollapsibleComponent(element.renderer);
          test.collapsible = element.collapsible;
          test.items = element.items;
          //test.onClose = element.onClose;
          //test.onOpen = element.onOpen;
          test.close(0)*/

          return;
      }
    })
. . .
}

Implementing a close button on a component should be max. an hours work... Of course we have a working solution now, but it costed us two weeks of hard work to get to the bottom of this problem, first because various tries to get the MZCollapsible in the TS code resulted in an 'undefined' (for example, a 'normal' ViewChildren, without the use of a template variable, doesn't work). Then we finally got what seems a valid MZCollapsibleComponent structure (see the console.logs in the closeCollapsible function above) and we were hit by the error. Then we only found a solution by 'accident' ('cloning' the broken object into a 'fresh' copy of MZCollapsibleComponent).

Environment:
"@angular/core": "6.0.7"
"ngx-materialize": "^6.0.1"
"typescript": "2.7.2"
Browser used: Google Chrome. Most recent version (20-08-2018) on Windows 10.
Currently this is a close source project.