Angular mat-select: two letters of company name duplicates is selected company

I have this Angular component with Material mat-select. I need to have a prefix next to each value, which is represented by a circle displaying two letters of the company name.

<mat-form-field appearance="outline" class="input-density w-60">
@if (selectedLocation) {
<div
class="bg-ds-bright-500 my-1.5 ml-2 mr-1 flex h-9 w-9 items-center justify-center rounded-full text-lg text-white"
[ngStyle]="{ 'background-color': selectedLocation.contactColor }"
matPrefix
>
<p class="uppercase">{{ selectedLocation.companyName[0] }}{{ selectedLocation.companyName[1] }}</p>
</div>
}
<mat-select [value]="locationId" (valueChange)="onValueChange($event)" class="my-1.5">
@for (location of locations; track location.locationId) {
<mat-option [value]="location.locationId">
<div class="flex flex-row items-center">
<div
class="bg-ds-bright-500 mr-2 flex h-9 min-h-9 w-9 min-w-9 items-center justify-center rounded-full text-lg text-white"
[ngStyle]="{ 'background-color': location.contactColor }"
>
<span class="uppercase">{{ location.companyName[0] }}{{ location.companyName[1] }}</span>
</div>
<span>{{ location.companyName }}</span>
</div>
</mat-option>
}
</mat-select>
</mat-form-field>


Problem: I faced a problem where, if the company name is "PropTech", it displays as "PrPropTech" instead of just "PropTech".

I noticed that Angular takes {{ location.companyName[0] }}{{ location.companyName[1] }} from mat-option and uses it for selected company.



Continue reading...