CODEWITHSUNDEEP
angular-material2
John
John

Reputation: 11439

How to use togglePosition in an accordion using Angular Material 8?

I am trying to use the @Input() togglePosition on an Angular Material Expansion Panel. The documentation states the following:

@Input() togglePosition: MatAccordionTogglePosition | The position of the expansion indicator.

Here is a Stackblitz of me trying to use that Input, but the application fails to build. On the first line of the HTML I have added:

<mat-accordion [togglePosition]="'before'">

I forked the original example on Angular Material, so I thought it would work. Am I doing something wrong?

Upvotes: 2

Views: 4064

Answers (2)

Safouene Zid
Safouene Zid

Reputation: 1

Assuming that you are using ' mat-expansion-panel-header ' selector , try to add this code into your styles.css:

.mat-expansion-panel-header {
  flex-direction: row-reverse !important;
}

Since they are using 'flex-direction:row' betwin the toggle arrow and the title , we only have to reverse them

Upvotes: 0

G. Tranter
G. Tranter

Reputation: 17958

The togglePosition feature was released in v8.1 of Angular Material, so it will not work if you are using v8.0 or earlier.

Upvotes: 4

Related Questions