Dynamically change background color of mat-expansion-panel-header based on whether or not it is expanded

Question

I've been struggling to find a way to dynamically change the background color of a material design expansion panel header based on whether or not the panel is expanded.

When the panel is closed I'd like the background color to be white, but when it is expanded I want to change that color to something else. I'm not seeing something I can base this change off of, maybe I'm missing something. I'm new to angular and was thinking I would just be able to base it off of [expanded]'s setting but it appears that is not the case.

mat-accordion
mat-expansion-panel
mat-expansion-panel-header
mat-expanded{
  font-size: 1.25em;
  background-color: white;
  background: white;
  color: #00838f;
  font-weight: 500;
}



mat-accordion
mat-expansion-panel
mat-expansion-panel-header {
  font-size: 1.25em;
  background-color: white;
  background: white;

  color: #00838f;
  font-weight: 500;
}


  mat-accordion
  mat-expansion-panel
  .mat-expansion-panel-body {
  background-color: white;
  padding-top: 5px;
}
.mat-expansion-indicator::after {
  color: #00838f;
}

<mat-accordion multi="true">
<mat-expansion-panel [expanded]="selectedBenefitCategories.indexOf(cat)!=-1" [hidden]="selectedBenefitCategories.indexOf(cat)===-1">
  <mat-expansion-panel-header>
    <i class="search-category-icon far fa-star"></i> &nbsp; {{cat}}
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>

    some content

  </ng-template>
</mat-expansion-panel>
</mat-accordion>

Answer 1

Angular Material does add dynamic classes based on the expanding state.

mat-expanded would be the one you are looking for. The problem is this class gets also attached to the panel-content. In order to fix this, you can simply combine it with the .mat-expansion-panel-header class selector.

All summed up this would look like this:

.mat-expansion-panel-header.mat-expanded {
  background: red;
}

Notice: Angular Material does also add background: inherit on the hover state.

If that's not the behavior you want, simply overwrite it like this:

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
  background: red;
}