3 votes

Angular 9 - Suppression de l'icône par défaut (créer) sur l'escalier matériel d'Angular

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 :

First step, create icon instead of gavel icon

Second step, same situation of first one. create icon instead of contact_support icon

...and of course, same annoying behaviour

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 :

enter image description here

J'ai déjà essayé :

  1. Définir [completed]=false sur <mat-step> mais il supprime simplement l'icône de contrôle dans les cercles précédents.
  2. 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 ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X