[mdExpansionPanel] margin animation (mat-expansion-panel-spacing) not triggered when used in custom component

Bug, feature request, or proposal:

I would like to use the md-expansion-panel within a custom component e.g. bsm-current-item that has a md-expansion-panel, since it is best practice to make ‘dumb’ components.

But when you use a md-expansion-panel within a custom component, the mat-expansion-panel-spacing class is not triggered, since _hasSpacing() seems to be false. And the margin isn’t added.

bsm-current-item (dumb component)

# Simplied by using the example code
    <md-expansion-panel class="md-expansion-demo-width" #myPanel>
      <md-expansion-panel-header expandedHeight="104px" collapsedHeight="88px">
        <mat-panel-description>This is a panel description.</mat-panel-description>
        <mat-panel-title>Panel Title</mat-panel-title>
      </md-expansion-panel-header>
      This is the content text that makes sense here.
      <md-action-row>
        <button md-button (click)="myPanel.expanded = false">CANCEL</button>
        <button md-button>SAVE</button>
      </md-action-row>
    </md-expansion-panel>

bsm-playlist (host)

<md-accordion>
   <bsm-current-item *ngFor="let playlistItem of playlistItems$ | async | orderBy: 'orderNumber';" [playlistItem]="playlistItem">
</md-accordion>

Question

Wat is the proper way to handle this?

Not creating a custom component with the expansion panel behavior and adding the expansion panel code to bsm-playlist, works, but doesn’t seem/feels like a proper solution

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

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.2
node: 8.1.4
os: win32 x64
@angular/animations: 4.3.6
@angular/cdk: 2.0.0-beta.10-1b6b270
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/material: 2.0.0-beta.10-1b6b270
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/platform-server: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

Is there anything else we should know?

[willshowell]

@the-ult the tight coupling decision makes sense and IMO you should just make your smart/dumb split elsewhere. Try this:

<md-accordion>
  <md-expansion-panel *ngFor="item of items" [item]="item">

    <!-- Panel header -->
    <md-expansion-panel-header>
      <md-panel-title>
        <app-panel-title></app-panel-title>
      </md-panel-title>
      <md-panel-description>
        ...
      </md-panel-description>
    </md-expansion-panel-header>

    <!-- Panel content -->
    <app-player-stats [players]="players$ | async | orderBy: 'firstName'"></app-player-stats>

  </md-expansion-panel>
</md-accordion>

You may have to adjust your inputs/outputs appropriately (or use a common service to communicate with the dumb components), but you should be able to architect it just fine!

If you want to discuss app design decisions, maybe post on Stack Overflow or r/Angular2 and link back here. I’d be happy to chat more about it.

[josephperrott]

I’ll go ahead and close this issue since we have covered the tight coupling requirement for accordions.