How to position the Angular Material expansion panel arrow icon on the left-hand side

Issue

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>

Solution

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

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

Thanks,

Answered By – AddWeb Solution Pvt Ltd

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0