web-dev-qa-db-fra.com

Comment faire l'icône angular flèche du panneau d'extension de matériau sur le côté gauche

Mise à niveau angular à 4.0, dans mon application en utilisant le selon l'exigence, la flèche d'expansion doit être dans le côté gauche du panneau par défaut, elle s'affiche dans le côté droit. Vérifié pour l'alignement option n'a pas obtenu.

<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>
angulartypescriptangular-material
6
Govinda raj

vous devez d'abord importer angular angulaire et module de panneau d'extension dans le fichier app.module.ts,

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

Ajoutez ce code dans votre fichier 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>

Ajoutez ce code dans votre fichier composant,

icon: boolean = false;

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

Merci,

13
AddWeb Solution Pvt Ltd

A fonctionné pour moi en utilisant simplement CSS:

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

Depuis Angular Material 8.1.x, vous pouvez utiliser le décorateur @Input() togglePosition-).

La documentation indique ce qui suit

@Input () togglePosition: MatAccordionTogglePosition | La position de l'indicateur d'expansion.

Ajoutez-le à l'accordéon comme ceci: <mat-accordion [togglePosition]="'before'">

Voici un Stackblitz avec un exemple

3
John

Pas besoin d'ajouter de fonction et de variable. Ajoutez simplement ce style:

.mat-expansion-panel-header > span.mat-content {
    order: 2;    
}
1
Manoprabu R

Utilisez le Angular Decorator "@indicatorRotate"

   <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
     expand_more
  </mat-icon>
0
Thiago Lúcio