<md-expansion-panel> does not open or close

Bug, feature request, or proposal:

Bug (probably)

What is the expected behavior?

The <md-expansion-panel> should open and close when the button is clicked.

What is the current behavior?

The expansion panel does not open when the button is clicked. Nothing is shown on the console. Also, when I add [expanded]="true" into the <md-expansion-panel>, it is open but it doesn’t close when the button is clicked. Instead, I get this on console:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
    at viewDebugError (core.es5.js:8434)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412)
    at checkBindingNoChanges (core.es5.js:8576)
    at checkNoChangesNodeInline (core.es5.js:12448)
    at checkNoChangesNode (core.es5.js:12422)
    at debugCheckNoChangesNode (core.es5.js:13202)
    at debugCheckRenderNodeFn (core.es5.js:13142)
    at Object.eval [as updateRenderer] (HomePageComponent.html:16)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13124)
    at checkNoChangesView (core.es5.js:12244)

What are the steps to reproduce?

When I did a Plunker, it all worked. However, in my local environment with "@angular/material": "^2.0.0-beta.11" I get the described behavior. My HTML seems basic enough to not have any problems:

<md-accordion>
  <md-expansion-panel *ngFor="let item of contentService.news()" [expanded]="true">
    <md-expansion-panel-header>
      <md-panel-title>{{item.title}}</md-panel-title>
    </md-expansion-panel-header>
    {{item.content}}    
  </md-expansion-panel>  
</md-accordion>

I also tried the development build of Material and CDK, it didn’t make a difference.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

“@angular/core”: “^4.3.6”, “@angular/material”: “^2.0.0-beta.11”, “typescript”: “~2.2.0”

Is there anything else we should know?

[willshowell]

@fljmayer I would recommend not creating new objects via a template binding like that. You have little control over how often that method will be called. You can make your component OnPush to mitigate most of the problem, but still, it will be called every time you interact with your component.

But… you asked why it doesn’t work. Basically, ngFor uses object references to keep track of what is to be displayed. The object ref is the only identifier that ngFor can guarantee to be unique. So each time you click on the panel, items() is being called, which returns new objects into the template. Since none of the new objects match the one you clicked on to open, none of the new ones will be open.

This is what trackBy is used for. You supply a function that will return a unique identifier. Best explained via an example.

Again, please reconsider how your component is set up if new objects are being created due to some method call in the template.

[josephperrott]

This is working as intended. You are seeing this error because you are trying to set an initial value of expanded on all of the panels. However when each tries to open it causes the others to close, but they have already been change detected. The clicks no longer work as angular (since its in non prod mode) prevents the event system from working to highlight the issue to developers.

If you would like to initialize all of the panels in an open state, you will need to add [multi]="true" to your <md-accordion> tag.