Comment faire de l'angle d'expansion matérielle panneau icône en forme de flèche sur le côté gauche
Angulaire de la mise à niveau du matériel de la section 4.0, Dans mon application à l'aide de la que par l'exigence de la flèche d'expansion doit être dans le côté gauche du panneau par défaut, c'est l'affichage dans la fenêtre de droite. Vérifié pour l'option aligner n'a pas l'obtenir.
<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>
Vous devez vous connecter pour publier un commentaire.
vous devez d'abord importer angulaire icône du matériau et de l'expansion du panneau de module dans l'application.le module.fichier ts,
Ajouter ce code dans votre fichier HTML,
Ajouter ce code dans votre fichier de composant,
Merci,
icon
champ vous pouvez utiliser#panel
sur le panneau (c'est à dire,<mat-expansion-panel #panel ...
) et dans lemat-icon
élément{{panel.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}}
... cela permettrait d'éliminer la nécessité pour lesclick
gestionnaire d'événement.Travaillé pour moi tout à l'aide de css:
Pas besoin d'ajouter de la fonction et de variable. Il suffit d'ajouter ce style:
Comme Angulaire Matériel 8.1.x, vous pouvez utiliser le
@Input() togglePosition
-décorateur.La documentation indique ce qui suit
Ajouter à l'accordéon comme ceci:
<mat-accordion [togglePosition]="'before'">
Ici est un Stackblitz avec un exemple