如何在左侧制作角度材料扩展面板箭头图标

Question

将角度材料升级到4.0,在我的应用程序中使用按要求,扩展箭头必须位于面板的左侧,默认情况下它显示在右侧.检查对齐选项没有得到.

<mat-expansion-panel expanded='true'>
  <mat-expansion-panel-header [ngClass]="tickets-container-header">
    <mat-panel-title>
        <div class="col-md-9">
        {{header}} 
        </div>
    </mat-panel-title>

  </mat-expansion-panel-header>
</mat-expansion-panel>

Answer 1

从 Angular Material 8.1.x 开始，您可以使用@Input() togglePosition-decorator。

文档说明如下

@Input() togglePosition: MatAccordionTogglePosition | 扩展指示器的位置。

像这样将它添加到手风琴中： <mat-accordion [togglePosition]="'before'">

这是一个带有示例的Stackblitz

Answer 2

首先,您需要在app.module.ts文件中导入角度材质图标和扩展面板模块,

import {MatExpansionModule,MatIconModule} from '@angular/material';
...
@NgModule({
  ...
  imports: [
    MatExpansionModule,
    MatIconModule 
  ]
  ...
})
export class AppModule { }

在HTML文件中添加此代码,

    <mat-expansion-panel expanded='true' hideToggle="true" (click)="click()">
      <mat-expansion-panel-header [ngClass]="tickets-container-header">
        <mat-panel-title>
            <mat-icon>{{icon  ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</mat-icon>
            <div  class="col-md-9">
            {{header}} 
            </div>
        </mat-panel-title>

      </mat-expansion-panel-header>
    </mat-expansion-panel>

在组件文件中添加此代码,

icon: boolean = false;

click(){
    this.icon = !this.icon;
  }

谢谢,

Answer 3

仅使用CSS为我工作：

.mat-expansion-indicator {
    position: absolute;
    left: 15px;
  }