diff --git a/src/lib/expansion/accordion-item.ts b/src/lib/expansion/accordion-item.ts index 52ec10681bc8..53b7b2de822e 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,8 @@ export class AccordionItem implements OnDestroy { } else { this.closed.emit(); } + + this._changeDetectorRef.markForCheck(); } } private _expanded: boolean; @@ -52,6 +62,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 d2ba9541fb50..4221e4166583 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 d7d56b21fa35..6dad4bb798c4 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; }