md-expansion-panel with a button

Bug, feature request, or proposal:

More a request than a bug I suppose

What is the expected behavior?

When having a button in <md-expansion-panel-header> the button should trigger normaly without collapsing the panel.

What is the current behavior?

Clicking the button collapses the panel

What are the steps to reproduce?

http://plnkr.co/edit/QFkAL500pcgqxLgL9BnF?p=preview

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

I believe it should behave a little bit like a toolbar (+ the expansion part), it would be great. A class should maybe exist to prevent this behavior in the <md-expansion-panel-header> tag

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

Is there anything else we should know?

[ortichon]

Hi guys, I solved similar issue by adding (click)="foo($event)" to the check-box element, then in the Component I do

foo(event: Event) {
  event.stopPropagation();
}

[kuncevic]

That is what I am trying to do:

Basically I have a filters thing, so I want to show the basic filter by default and then if user want to apply more filters the panel has to be expanded by clicking the expand button.

Now if user clicked any controls on in the header it trigger the panel to expand. It would of be nice to be able to have an option that you can expand panel only by clicking the dedicated expand button in the right corner.

However by reading the responses on that issue seams like it is against the Expansion Panel Google material style guide however it is something in my spec that I have to implement and seems like mat-expansion-panel is the best thing to address that.

@julianobrasil Tried to set [disabled]="false" but now it prevents the panel to be expanded.

What do you think is the best way of handle that?

UPDATE: I kind of work it out by playing with disabled attribute say like putting a button in the mat-panel-description that call the expandPannel()

<mat-expansion-panel class="mat-expansion-demo-width" [disabled]="true" #myPanel>
  <mat-expansion-panel-header>
    <mat-panel-description>
        <div>
          <div>
            Filter Date:&nbsp;
            <mat-form-field>
              <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date">
              <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
              <mat-datepicker #minDatePicker [touchUi]="true"></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
              <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date">
              <mat-datepicker-toggle matSuffix [for]="maxDatePicker"></mat-datepicker-toggle>
              <mat-datepicker #maxDatePicker [touchUi]="true"></mat-datepicker>
            </mat-form-field>
            <mat-checkbox labelPosition="after">Consolidate Stores</mat-checkbox>
          </div>
          <div class="actions">
            <button mat-icon-button color="primary" (click)="expandPannel()">
                <mat-icon>{{matIcon}}</mat-icon>
            </button>
          </div>
      </div>
    </mat-panel-description>
  </mat-expansion-panel-header>

matIcon = 'keyboard_arrow_down' || 'keyboard_arrow_up';
expandPannel() {
    this.myPanel.expanded = !this.myPanel.expanded;
  }

Also you need this css to hide the default arrow:

/deep/ .mat-expansion-indicator::after {
  visibility: hidden !important;
  display: none !important;
}

But it is kind of hacky I would say. It would of be much nicer if Expansion Panel could handle such case.

UPDATE: working example based on the code above https://stackblitz.com/edit/angular-3jcuzp