Custom Functions With Material Design Expansion Panel Header Icon

Question

Here is a material design accordion for this I am adding an icon in panel header. With this icon I am expecting my own function named as 'myFun()' by click event. Function is invoking but by every click expansion panel is toggling(which is I am not expecting) How can I do this without toggling the expansion panel.

<md-accordion class="example-headers-align">
  <md-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
    <md-expansion-panel-header>
      <md-panel-title>
        Personal data
      </md-panel-title>
      <md-panel-description>
        Type your name and age
        <md-icon (click)="myFun()">account_circle</md-icon>
      </md-panel-description>
    </md-expansion-panel-header>
  </md-expansion-panel>
</md-accordion>

Faisal Faisal · Accepted Answer · 2017-10-06T06:27:06

You need to stop event propagation. Do the following:

<md-icon (click)="myFun(); $event.stopPropagation();">

Custom Functions With Material Design Expansion Panel Header Icon

1 Answers