Angular Material Accordion 基于单选按钮值打开/关闭

Question

I am trying to use a mat-accordion with a group of radio buttons, one per panel. If the radio button is selected, expand that panel, close the others and deselect the other radios as expected.

I have the radio buttons working as expected, but the panels expand and retract on click as normal; I am trying to get them to only expand if their radio button is checked.

I have tried disabling the panel, but that disables its content including the radio button.

How can i have it only expand/collapse based on its radio button state?

  <mat-accordion hideToggle="true">
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-radio-button
          (change)="onChange($event)"
          name="services"
          id="service1"
          value="service1"
        >
          <mat-panel-title> Service 1</mat-panel-title>
        </mat-radio-button>
      </mat-expansion-panel-header>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, possimus
      aliquam sunt dolorem nam saepe esse laboriosam eius quae quaerat!
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-radio-button
          (change)="onChange($event)"
          name="services"
          id="service2"
          value="service2"
        >
          Service 2</mat-radio-button
        >
      </mat-expansion-panel-header>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, possimus
      aliquam sunt dolorem nam saepe esse laboriosam eius quae quaerat!
    </mat-expansion-panel>
  </mat-accordion>
  {{ selectedService }}

and the component:

  selectedService = 'service1';

  onChange(event) {
    event.source.checked = true;
    this.selectedService = event.source.value;
  }

Answer 1

Stackblitz demo

You'll have to disable mat-expansion-panel (it still can be opened programmatically). Also, you have to fix some CSS style because, for some reason, the radio button is shifted up when you click on it. So let's start with the styles:

.fix-radio-position .mat-expansion-panel
.mat-expansion-panel-header mat-panel-description 
.mat-radio-button {
  line-height: 2;
}

Now apply the css class to accordion element:

<mat-accordion class="fix-radio-position" hideToggle="true">
...
</mat-accordion>

You'll have to disable your panels by adding the disabled attribute, and put a template reference variable on each one so we can pass them as arguments with the click on the radio buttons:

<mat-expansion-panel #panel1 disabled>
...
</mat-expansion-panel>

<mat-expansion-panel #panel2 disabled>
...
</mat-expansion-panel>

Change a little bit the signature of onChange event so you can pass the parent panel as a parameter:

<mat-radio-button (change)="onChange($event, panel1)">Service 1</mat-radio-button>
...
<mat-radio-button (change)="onChange($event, panel2)">Service 2</mat-radio-button>

At last, your onChange method becomes:

onChange(radio: MatRadioChange, panel: MatExpansionPanel) {
  panel.open();
}