CODEWITHSUNDEEP
cssangularanimationangular-material
Flash
Flash

Reputation: 1014

Mat Expansion Panel show indicator on disabled and change direction of animation

I am trying to edit the CSS of the matexpansion indicator. I want the arrow animation to turn inward instead of outward and I want the indicator to still show when it is disabled I tried adding this attribute hideToggle='false' but when disabled it overides it and hides the indicator. To change the direction of the animation I read on the docs about using: const EXPANSION_PANEL_ANIMATION_TIMING: "225ms cubic-bezier(0.4,0.0,0.2,1)"; but I am not sure wher to place it in my code, Here is my stack blitz: https://stackblitz.com/edit/angular-h2sodq?file=app%2Fexpansion-overview-example.ts

<mat-expansion-panel  hideToggle = "false" disabled = true>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>

Upvotes: 1

Views: 3923

Answers (1)

nitin9nair
nitin9nair

Reputation: 598

To show the chevron or indicator even when the panel is disabled try as below:

HTML

<mat-expansion-panel [disabled]="boolCondition">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Personal data
      // you have to add the below span tag in every expansion panel with a condition
      <span *ngIf="boolCondition"  class="mat-expansion-indicator"></span>
    </mat-panel-title>
</mat-expansion-panel-header>

CSS

.mat-expansion-indicator::after {
   transform: rotate(225deg) !important;
}

// for the mat-expansion indicator to displayed when it is disabled
.mat-expansion-indicator {
   position: absolute;
   right: 55px;
}

stackblitz working demo

Upvotes: 2

Related Questions