I use this angular material select in my Angular 5 application:
<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>
On the select panel <mat-icon> are listed as expected but if I select one option then the home icon does not appear in <mat-form-field>
How could I also view the home icon in <mat-form-field> once selected?
4 Answers
This can be accomplished via the "mat-select-trigger" option. Documentation on the "mat-select" can be found here.
Below should be a working example of what you are trying to do. Based on what you provided.
<mat-form-field style="width: 88%">
<mat-select placeholder="Contact *" formControlName="contact">
<mat-select-trigger>
<mat-icon>home</mat-icon> {{ 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>
And apply styles as necessary.
You can add a matPrefix to the form field:
<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>
If the icon is a property of each contact such as contact.icon then you will need to do a bit more work to bind the currently selected contact's icon property to the mat-icon name:
<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>
I had the same issue, and I fixed by subscribing to the contact field of the reactive form, and then update the value of your object here is how.
My Template
<mat-form-field appearance="fill">
<mat-label>Avatar</mat-label>
<mat-select formControlName="avatar">
<mat-select-trigger>
<mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{user.avatar}}
</mat-select-trigger>
<mat-option *ngFor="let avatar of avatars" [value]="avatar">
<mat-icon svgIcon="{{avatar}}"></mat-icon>{{avatar}}
</mat-option>
</mat-select>
</mat-form-field>
My TS Code
this.contactForm.get('avatar').valueChanges.subscribe((value) => {
this.user.avatar = value;
});
and as you noticed I'm here updating the user object with the selected value, then
<mat-icon svgIcon="{{user.avatar}}"></mat-icon>
will be updated by the selected avatar.
You can add conditions inside mat-select-trigger using :
<mat-select matInput formControlName="status" placeholder="select status" required>
<mat-select-trigger>
<ng-container [ngTemplateOutlet]="icons" [ngTemplateOutletContext]="{data:formControls.status.value}"></ng-container>
</mat-select-trigger>
<mat-option *ngFor="let currStatus of data.status" [value]="currStatus ">
<ng-container [ngTemplateOutlet]="icons" [ngTemplateOutletContext]="{data: currStatus}"></ng-container>
</mat-option>
</mat-select>
to avoide duplicate code you can set the mat-icon section in template
<ng-template #icons let-data="data">
<mat-icon *ngIf="data.key === taskStatus.WAITING">hourglass_empty</mat-icon>
<mat-icon *ngIf="data.key === taskStatus.IN_PROGRESS">autorenew</mat-icon>
<mat-icon *ngIf="data.key === taskStatus.COMPLETED">done</mat-icon>
{{data.value}}
</ng-template>
in ts file:
public get formControls() { return this.createTaskForm.controls; }
