Je suis confronté à ce problème ennuyeux avec Angular : J'ai remplacé les icônes de stepper en ajoutant dans la section provides
de la page :
provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false, showError: true}
Voici la page HTML (juste un morceau, il y a 7 éléments copiés/collés) :
<mat-horizontal-stepper>
<!-- AREA -->
<mat-step label="Step 1" state="area">
<p>Put down your phones</p>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<!-- QUESTION -->
<mat-step label="Step 2" state="question">
<p>Socialize with each other</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<!-- MODE -->
<mat-step label="Step 3" state="mode">
<p>Socialize with each other</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
...
<!-- Icon overrides -->
<!-- AREA -->
<ng-template matStepperIcon="area">
<mat-icon>gavel</mat-icon>
</ng-template>
<!-- QUESTION -->
<ng-template matStepperIcon="question">
<mat-icon>contact_support</mat-icon>
</ng-template>
<!-- MODE -->
<ng-template matStepperIcon="mode">
<mat-icon>forum</mat-icon>
</ng-template>
...
Comme vous pouvez le voir, c'est juste l'exemple que vous pouvez trouver sur Angular 9 documentation
Bien, maintenant laissez-moi introduire le problème avec plusieurs images :
Il suffit de regarder les cercles, ils devraient avoir à l'intérieur leurs propres icônes (marteau, constact_support, forum). Mais quand je suis sur une de ces étapes, il remplace l'icône par une autre, pour être précis avec créer une icône .
Maintenant, si je reviens à la deuxième étape, dans le cercle apparaît l'icône correcte, sans cet ennuyeux écrasement :
J'ai déjà essayé :
- Définir
[completed]=false
sur<mat-step>
mais il supprime simplement l'icône de contrôle dans les cercles précédents. -
Remplace l'icône :
<ng-template matStepperIcon="edit"> <mat-icon>gavel</mat-icon> </ng-template>
Mais cela ne sert à rien puisqu'il ne fait que remplacer l'icône, donc le problème existe toujours. J'ai également essayé de laisser l'icône <mat-icon></mat-icon>
vide, mais bien sûr, cela laisse juste une icône vide dans le cercle.
Ce que j'essaie de faire, c'est de contourner cet "écrasement automatique". Une idée ?