CODEWITHSUNDEEP
angularangular-material
Raza Ellahi
Raza Ellahi

Reputation: 409

how to change the content of mat expansion panel header when in expanded mode

I want to change the contents of mat expansion panel header when it is expanded, and when collapsed returns to previous state. 

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <div>{{'my name is joe'}}</div>
        <div>{{'i am 20 years old'}}</div>
        // when expanded i want to hide the second div and change
        // the style of first div margin, padding e.t.c
    </mat-expansion-panel-header>
    // ....
</mat-expansion-panel>

Upvotes: 1

Views: 6636

Answers (1)

Fabian K&#252;ng
Fabian K&#252;ng

Reputation: 6183

You can use a template variable and the property expanded of the mat-expansion-panel like this:

Template

<mat-expansion-panel #panel>
  <mat-expansion-panel-header>
    <div [ngClass]="{'first-div': panel.expanded}">Always shown</div>
    <div *ngIf="!panel.expanded">Not shown when expanded</div>
  </mat-expansion-panel-header>
  Content here
</mat-expansion-panel>

CSS

.first-div {
  background-color: red;
}

Updated stackblitz that hides the second div when expanded and applies a CSS class to the first one.

Upvotes: 2

Related Questions