Add open/close programmatically for collapsible

demo-app/src/app/collapsible/collapsible.component.html

@@ -144,6 +144,50 @@ <h5 class="light">Preselected Section</h5>
   </p>
 </div>
 
+<div class="section">
+  <h5 class="light">Open/close programmatically</h5>
+
+  <div class="row">
+
+    <mz-collapsible #collapsibleProgrammatically class="col s12 m8 l6">
+
+      <mz-collapsible-item>
+        <mz-collapsible-item-header>First</mz-collapsible-item-header>
+        <mz-collapsible-item-body>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </p>
+        </mz-collapsible-item-body>
+      </mz-collapsible-item>
+
+      <mz-collapsible-item>
+        <mz-collapsible-item-header>Second</mz-collapsible-item-header>
+        <mz-collapsible-item-body>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </p>
+        </mz-collapsible-item-body>
+      </mz-collapsible-item>
+
+      <mz-collapsible-item>
+        <mz-collapsible-item-header>Third</mz-collapsible-item-header>
+        <mz-collapsible-item-body>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </p>
+        </mz-collapsible-item-body>
+      </mz-collapsible-item>
+
+    </mz-collapsible>
+
+    <div class="col s12 m4 l6">
+      <p>Collapsible sections can be programmatically open or close with <code class="language-markup">open</code> or <code class="language-markup">close</code> method using a <a href="https://angular.io/guide/template-syntax#ref-vars" target="_blank">template reference variable</a> on the <code class="language-markup">mz-collapsible</code> element.</p>
+      <button mz-button (click)="openFirstSection()">Open first section</button>
+      <button mz-button (click)="closeFirstSection()">Close first section</button>
+    </div>
+  </div>
+</div>
+
 <div class="section">
 
     <h5 class="light">Playground</h5>
@@ -226,3 +270,50 @@ <h6 class="bold">mz-collapsible-item</h6>
     </app-properties-table>
   </div>
 </div>
+
+<div class="section">
+
+  <h5 class="light">Methods</h5>
+
+  <p>
+    The <code class="language-markup">mz-collapsible</code> component expose methods to programmatically interact with the collapsible sections. To use them you need to add a <a href="https://angular.io/guide/template-syntax#ref-vars" target="_blank">template reference variable</a> on the <code class="language-markup">mz-collapsible</code> element.
+  </p>
+
+  <div class="section">
+    <h6 class="bold">open(index: number): void</h6>
+
+    <table class="striped responsive-table">
+      <thead>
+        <th>Parameter</th>
+        <th>Type</th>
+        <th>Description</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td>index</td>
+          <td>number</td>
+          <td>The zero base index of collapsible section to open</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="section">
+    <h6 class="bold">close(index: number): void</h6>
+
+    <table class="striped responsive-table">
+      <thead>
+        <th>Parameter</th>
+        <th>Type</th>
+        <th>Description</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td>index</td>
+          <td>number</td>
+          <td>The zero base index of collapsible section to close</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

demo-app/src/app/collapsible/collapsible.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { MzCollapsibleComponent } from 'ng2-materialize';
 
 import { ROUTE_ANIMATION, ROUTE_ANIMATION_HOST } from '../app.routing.animation';
 import { IPropertyRow } from '../shared/properties-table/properties-table.component';
@@ -12,6 +13,8 @@ import { IPropertyRow } from '../shared/properties-table/properties-table.compon
 })
 export class CollapsibleComponent {
 
+  @ViewChild('collapsibleProgrammatically') collapsibleProgrammatically: MzCollapsibleComponent;
+
   // fake data
   simpleCollapsibleItems = [
     {
@@ -125,6 +128,14 @@ export class CollapsibleComponent {
     });
   }
 
+  closeFirstSection() {
+    this.collapsibleProgrammatically.close(0);
+  }
+
+  openFirstSection() {
+    this.collapsibleProgrammatically.open(0);
+  }
+
   remove() {
     this.playgroundCollapsibleItems.splice(this.playgroundCollapsibleItems.length - 1);
   }

src/app/collapsible/collapsible-item/collapsible-item.component.ts

@@ -1,6 +1,6 @@
 import { Component, Directive, Input } from '@angular/core';
 
- import { MzRemoveComponentHost } from '../../shared/remove-component-host/remove-component-host';
+import { MzRemoveComponentHost } from '../../shared/remove-component-host/remove-component-host';
 
 @Component({
   selector: 'mz-collapsible-item',

src/app/collapsible/collapsible.component.ts

@@ -4,9 +4,11 @@ import {
   ContentChildren,
   ElementRef,
   Input,
+  OnDestroy,
   QueryList,
   Renderer,
-  ViewChild } from '@angular/core';
+  ViewChild,
+} from '@angular/core';
 
 import { MzCollapsibleItemComponent } from './collapsible-item/collapsible-item.component';
 
@@ -15,7 +17,7 @@ import { MzCollapsibleItemComponent } from './collapsible-item/collapsible-item.
   templateUrl: './collapsible.component.html',
   styleUrls: ['./collapsible.component.scss'],
 })
-export class MzCollapsibleComponent implements AfterViewInit {
+export class MzCollapsibleComponent implements AfterViewInit, OnDestroy {
   @Input() mode: string;
   @Input() onClose: Function;
   @Input() onOpen: Function;
@@ -33,19 +35,31 @@ export class MzCollapsibleComponent implements AfterViewInit {
     this.initCollapsible();
   }
 
+  ngOnDestroy(): void {
+    $(this.collapsible.nativeElement).collapsible('destroy');
+  }
+
+  close(collapsibleItemIndex: number) {
+    $(this.collapsible.nativeElement).collapsible('close', collapsibleItemIndex);
+  }
+
   initCollapsible() {
     const options: Materialize.CollapsibleOptions = {
       accordion: false,
       onClose: this.onClose,
       onOpen: this.onOpen,
     };
 
-    this.renderer.invokeElementMethod($(this.collapsible.nativeElement), 'collapsible', [options]);
+    $(this.collapsible.nativeElement).collapsible(options);
   }
 
   handleDataCollapsible() {
     if (this.mode) {
       this.renderer.setElementAttribute(this.collapsible.nativeElement, 'data-collapsible', this.mode);
     }
   }
+
+  open(collapsibleItemIndex: number) {
+    $(this.collapsible.nativeElement).collapsible('open', collapsibleItemIndex);
+  }
 }

src/app/collapsible/collapsible.component.unit.spec.ts

@@ -76,27 +76,65 @@ describe('MzCollapsibleComponent:unit', () => {
       component.onClose = () => {};
       component.onOpen = () => {};
 
-      const mockJQueryCollapsibleNativeElement = { collapsible: true };
+      const mockCollapsibleElement = { collapsible: (options: Materialize.CollapsibleOptions) => { } };
 
-      spyOn(component.renderer, 'invokeElementMethod');
+      spyOn(mockCollapsibleElement, 'collapsible');
 
       spyOn(window, '$').and.callFake((selector: any) => {
         return selector === component.collapsible.nativeElement
-          ? mockJQueryCollapsibleNativeElement
-          : {};
+        ? mockCollapsibleElement
+        : {};
       });
 
       component.initCollapsible();
 
-      expect(component.renderer.invokeElementMethod)
-        .toHaveBeenCalledWith(
-          mockJQueryCollapsibleNativeElement,
-          'collapsible', [{
-            accordion: false,
-            onClose: component.onClose,
-            onOpen: component.onOpen,
-          }],
-        );
+      const expectCollapsibleOption = <Materialize.CollapsibleOptions> {
+        accordion: false,
+        onClose: component.onClose,
+        onOpen: component.onOpen,
+      };
+
+      expect(mockCollapsibleElement.collapsible).toHaveBeenCalledWith(expectCollapsibleOption);
     }));
   });
+
+  describe('open', () => {
+
+    it('should open collapsible item with specified index', () => {
+
+      const mockCollapsibleElement = { collapsible: (method: string, index: number) => { } };
+
+      spyOn(window, '$').and.callFake((selector: any) => {
+        return selector === component.collapsible.nativeElement
+          ? mockCollapsibleElement
+          : {};
+      });
+
+      spyOn(mockCollapsibleElement, 'collapsible');
+
+      component.open(0);
+
+      expect(mockCollapsibleElement.collapsible).toHaveBeenCalledWith('open', 0);
+    });
+  });
+
+  describe('close', () => {
+
+    it('should close collapsible item with specified index', () => {
+
+      const mockCollapsibleElement = { collapsible: (method: string, index: number) => { } };
+
+      spyOn(window, '$').and.callFake((selector: any) => {
+        return selector === component.collapsible.nativeElement
+          ? mockCollapsibleElement
+          : {};
+      });
+
+      spyOn(mockCollapsibleElement, 'collapsible');
+
+      component.close(0);
+
+      expect(mockCollapsibleElement.collapsible).toHaveBeenCalledWith('close', 0);
+    });
+  });
 });