如何将Angular Material扩展面板的箭头图标放置在左侧 [英] How to position the Angular Material expansion panel arrow icon on the left-hand side

问题描述

我已在我的应用程序中将Angular Material升级到4.0.我正在按要求使用<mat-expansion-panel>.扩展箭头必须在面板的左侧，但默认情况下显示在右侧.我已经检查了align选项，但没有得到所需的东西.

I have upgraded Angular Material to 4.0 in my app. I am using the <mat-expansion-panel> as per requirement. The expansion arrow has to be on the left-hand side of the panel, but by default it's displaying on the right-hand side. I have checked for the align option, but I didn't get what I need.

<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>

推荐答案

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

first you need to import angular material icon and expansion panel module in app.module.ts file,

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

将此代码添加到您的HTML文件中，

Add this code in your HTML file,

    <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>

将此代码添加到您的组件文件中，

Add this code in your component file,

icon: boolean = false;

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

谢谢

这篇关于如何将Angular Material扩展面板的箭头图标放置在左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！