fix(expansion) Add expansion panel outputs (#7309)

Author: josephperrott

e2e/components/expansion-e2e.spec.ts

@@ -5,15 +5,19 @@ describe('expansion', () => {
 
   beforeEach(() => browser.get('/expansion'));
 
-  it('should show a expansion panel', async () => {
-    expect(element(by.css('.mat-expansion-panel'))).toBeDefined();
+  it('should show an accordion', async () => {
+    expect(element(by.css('.mat-accordion'))).toBeDefined();
+    screenshot();
+  });
 
+  it('should show two panels', async () => {
+    expect(element.all(by.css('.mat-expansion-panel')).count()).toBe(2);
     screenshot();
   });
 
   it('should hide contents of the expansion panel on click', async () => {
-    const panelHeader = element(by.css('.mat-expansion-panel-header'));
-    const panelContent = element(by.css('.mat-expansion-panel-content'));
+    const panelHeader = element.all(by.css('.mat-expansion-panel-header')).get(0);
+    const panelContent = element.all(by.css('.mat-expansion-panel-content')).get(0);
 
     expect(panelContent.isDisplayed()).toBe(false);
 
@@ -22,4 +26,19 @@ describe('expansion', () => {
     expect(panelContent.isDisplayed()).toBe(true);
   });
 
+  it('should emit events for expanding and collapsing', async () => {
+    const panelHeader = element.all(by.css('.mat-expansion-panel-header')).get(1);
+    const panelDescription = element
+      .all(by.css('.mat-expansion-panel-header mat-panel-description')).get(1);
+
+    panelHeader.click();
+
+    expect(panelDescription.getText()).toContain('Currently I am open');
+
+    panelHeader.click();
+
+    expect(panelDescription.getText()).toContain('Currently I am closed');
+  });
+
 });
+

src/e2e-app/main.ts

@@ -1,4 +1,7 @@
 import {platformBrowser} from '@angular/platform-browser';
 import {E2eAppModuleNgFactory} from './e2e-app-module.ngfactory';
+import {enableProdMode} from '@angular/core';
+
+enableProdMode();
 
 platformBrowser().bootstrapModuleFactory(E2eAppModuleNgFactory);

src/lib/expansion/expansion-panel.ts

@@ -72,6 +72,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['disabled', 'expanded'],
+  outputs: ['opened', 'closed'],
   host: {
     'class': 'mat-expansion-panel',
     '[class.mat-expanded]': 'expanded',

src/material-examples/expansion-overview/expansion-overview-example.html

@@ -1,18 +1,32 @@
-<mat-expansion-panel>
-  <mat-expansion-panel-header>
-    <mat-panel-title>
-      Personal data
-    </mat-panel-title>
-    <mat-panel-description>
-      Type your name and age
-    </mat-panel-description>
-  </mat-expansion-panel-header>
-  
-  <mat-form-field>
-    <input matInput placeholder="First name">
-  </mat-form-field>
-  
-  <mat-form-field>
-    <input matInput placeholder="Age">
-  </mat-form-field>
-</mat-expansion-panel>
+<mat-accordion>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Personal data
+      </mat-panel-title>
+      <mat-panel-description>
+        Type your name and age
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <mat-form-field>
+      <input matInput placeholder="First name">
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput placeholder="Age">
+    </mat-form-field>
+  </mat-expansion-panel>
+  <mat-expansion-panel (opened)="panelOpenState = true"
+                       (closed)="panelOpenState = false">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Self aware panel
+      </mat-panel-title>
+      <mat-panel-description>
+        Currently I am {{panelOpenState ? 'open' : 'closed'}}
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <p>I'm visible because I am open</p>
+  </mat-expansion-panel>
+</mat-accordion>

src/material-examples/expansion-overview/expansion-overview-example.ts

@@ -7,4 +7,6 @@ import {Component} from '@angular/core';
   selector: 'expansion-overview-example',
   templateUrl: 'expansion-overview-example.html',
 })
-export class ExpansionOverviewExample {}
+export class ExpansionOverviewExample {
+  panelOpenState: boolean = false;
+}