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

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;
+}