chore(expansion-panel): switch to OnPush change detection

* Switches the expansion panel to `OnPush` change detection. * Fixes the open animation not triggering on the body element. Relates to #5035.
angular · Jul 6, 2017 · c2996a2 · c2996a2
1 parent ac3e21a
commit c2996a2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;
   }