From 5cafa2bb0fd6adc13d667497e1d4bfa51705063d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sun, 9 Jul 2017 04:41:03 +0200
Subject: [PATCH] chore(expansion-panel): switch to OnPush change detection
 (#5549)

* Switches the expansion panel to `OnPush` change detection.
* Fixes the open animation not triggering on the body element.

Relates to #5035.
---
 src/lib/expansion/accordion-item.ts         | 15 ++++++++++++++-
 src/lib/expansion/expansion-panel-header.ts |  2 ++
 src/lib/expansion/expansion-panel.ts        |  6 +++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/lib/expansion/accordion-item.ts b/src/lib/expansion/accordion-item.ts
index 52ec10681bc..db2ce5261d5 100644
--- a/src/lib/expansion/accordion-item.ts
+++ b/src/lib/expansion/accordion-item.ts
@@ -6,7 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Output, EventEmitter, Input, Injectable, OnDestroy, Optional} from '@angular/core';
+import {
+  Output,
+  EventEmitter,
+  Input,
+  Injectable,
+  OnDestroy,
+  Optional,
+  ChangeDetectorRef,
+} from '@angular/core';
 import {UniqueSelectionDispatcher} from '../core';
 import {CdkAccordion} from './accordion';
 
@@ -44,6 +52,10 @@ export class AccordionItem implements OnDestroy {
       } else {
         this.closed.emit();
       }
+
+      // Ensures that the animation will run when the value is set outside of an `@Input`.
+      // This includes cases like the open, close and toggle methods.
+      this._changeDetectorRef.markForCheck();
     }
   }
   private _expanded: boolean;
@@ -52,6 +64,7 @@ export class AccordionItem implements OnDestroy {
   private _removeUniqueSelectionListener: () => void = () => {};
 
   constructor(@Optional() public accordion: CdkAccordion,
+              private _changeDetectorRef: ChangeDetectorRef,
               protected _expansionDispatcher: UniqueSelectionDispatcher) {
      this._removeUniqueSelectionListener =
        _expansionDispatcher.listen((id: string, accordionId: string) => {
diff --git a/src/lib/expansion/expansion-panel-header.ts b/src/lib/expansion/expansion-panel-header.ts
index d2ba9541fb5..4221e416658 100644
--- a/src/lib/expansion/expansion-panel-header.ts
+++ b/src/lib/expansion/expansion-panel-header.ts
@@ -11,6 +11,7 @@ import {
   Directive,
   Host,
   ViewEncapsulation,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {
   trigger,
@@ -36,6 +37,7 @@ import {MdExpansionPanel, EXPANSION_PANEL_ANIMATION_TIMING} from './expansion-pa
   styleUrls: ['./expansion-panel-header.css'],
   templateUrl: './expansion-panel-header.html',
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'class': 'mat-expansion-panel-header',
     'role': 'button',
diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
index 7f2551f73c4..8bdc8c1758b 100644
--- a/src/lib/expansion/expansion-panel.ts
+++ b/src/lib/expansion/expansion-panel.ts
@@ -14,6 +14,8 @@ import {
   ViewEncapsulation,
   Optional,
   forwardRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {
   trigger,
@@ -47,6 +49,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
   selector: 'md-expansion-panel, mat-expansion-panel',
   templateUrl: './expansion-panel.html',
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'class': 'mat-expansion-panel',
     '[class.mat-expanded]': 'expanded',
@@ -75,8 +78,9 @@ export class MdExpansionPanel extends AccordionItem {
   @Input() hideToggle: boolean = false;
 
   constructor(@Optional() @Host() accordion: MdAccordion,
+              _changeDetectorRef: ChangeDetectorRef,
               _uniqueSelectionDispatcher: UniqueSelectionDispatcher) {
-    super(accordion, _uniqueSelectionDispatcher);
+    super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
     this.accordion = accordion;
   }