web-dev-qa-db-fra.com

Matière angulaire - Icône de tapis dans Mat Select

J'utilise ce matériau angulaire select dans mon application Angular 5: 

<mat-form-field style="width:88%;">
    <mat-select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>
</mat-form-field>

dans le panneau de sélection, les <mat-icon>s sont répertoriés comme prévu, mais si je sélectionne une option, home est répertorié dans <mat-form-field>Mon question serait de savoir comment afficher également l'icône de la maison dans <mat-form-field>

angularangular-material
6
quma

Ceci peut être accompli via l'option "mat-select-trigger". La documentation sur le "mat-select" peut être trouvée ici.

https://material.angular.io/components/select/api#MatSelectTrigger

Vous trouverez ci-dessous un exemple concret de ce que vous essayez de faire. Basé sur ce que vous avez fourni.

<mat-form-field style="width:88%;">
  <mat-select placeholder="Contact *" formControlName="contact">
    <mat-select-trigger>
      <mat-icon>home</mat-icon>&nbsp;{{contact.institution}}
    </mat-select-trigger>
    <mat-option *ngFor="let contact of contacts" [value]="contact">
      <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
    </mat-option>
  </mat-select>
</mat-form-field>

Et appliquez les styles nécessaires.

6
cain4355

Vous pouvez ajouter un matPrefix au champ de formulaire:

<mat-form-field style="width:88%;">

    <span matPrefix style="margin-right: 8px;"><mat-icon>home</mat-icon></span>

    <mat-select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>

</mat-form-field>

Si l'icône est une propriété de chaque contact telle que contact.icon, vous devrez alors effectuer un peu plus de travail pour lier la propriété icon du contact actuellement sélectionné au nom de l'icône mat:

<mat-form-field style="width:88%;">

    <span *ngIf="select.value" matPrefix style="margin-right: 8px;"><mat-icon>{{select.value.icon}}</mat-icon></span>

    <mat-select #select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>

</mat-form-field>
0
G. Tranter