title: Angular Material Limit toggling of MatExapansionPanel to only clicking arrow
body: <p>I'm using Angular Material to create my toggling panels. I still want my panel to expand and contract when clicking the arrow, but I not when I click anywhere in the panel header because I want to add a checkbox at the top. Currently, when I click on my checkbox, the toggling event of the panel fires when I click the checkbox. The 'change' event of the checkbox still fires afterward. </p>
  
  <p>I don't mind to have the panel toggles only when clicking its arrow, how do I stop the toggling of the panel from firing when clicking anywhere in the top?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;mat-expansion-panel #panel
         (opened)="togglePanel()"
         (closed)="togglePanel()"&gt;
      &lt;mat-expansion-panel-header&gt;
          &lt;mat-panel-title&gt;
              &lt;mat-checkbox (change)="onCheckChanged($event)"&gt;
                  &lt;label&gt;Options 1&lt;/label&gt;
              &lt;/mat-checkbox&gt;
          &lt;/mat-panel-title&gt;
          &lt;mat-panel-description&gt;&lt;/mat-panel-description&gt;
      &lt;/mat-expansion-panel-header&gt;
  &lt;/mat-expansion-panel&gt;
  </code></pre>
  
  <p>TypeScript</p>
  
  <pre><code>togglePanel() {
      // this event fires before the onCheckChanged event
  }
  
  onCheckChanged(event: MatCheckboxChange) {
      // this event fires after the togglePanel event
  }
  </code></pre>