CODEWITHSUNDEEP
angularangular-material
khadeeja
khadeeja

Reputation: 175

Make mat option and mat select have a different UI

I have a drop down where I have country code for phone number. Currently I want the selected item to have only flag image or code. And the drop down list to have image, country code and name of country.

<mat-form-field appearance="outline" fullWidth>
  <mat-label>Country Code</mat-label>
  <mat-select #matSelect [(value)]="selectedCode" [formControlName]="helperService.appConstants.countryCode" (selectionChange)="changeSelection(selectedCode)" required>
    <mat-option *ngFor="let code of countryCode" [value]="code.calling_code" (keypress)="numberOnly($event)&&phoneNumberValid(registerObj.userForm)">
      <img with="10px" height="10px" src="{{code.flag}}"> {{ code.country }} ({{code.calling_code}})
    </mat-option>
  </mat-select>
</mat-form-field>

Thats the code I am writing. I have the image for current UI as well. They are attached below.

enter image description hereenter image description here

I want the selected item to look like the image below. I don't know what should I change so that the selected item will be displayed with only image.

enter image description here

Upvotes: 5

Views: 1910

Answers (1)

Kari F.
Kari F.

Reputation: 1434

Try adding <mat-select-trigger>:

    <mat-select-trigger>
       <img with="10px" height="10px" src="{{code.flag}}">
    </mat-select-trigger>

Your code would be like this:

<mat-form-field appearance="outline" fullWidth>
  <mat-label>Country Code</mat-label>
  <mat-select #matSelect [(value)]="selectedCode" [formControlName]="helperService.appConstants.countryCode" (selectionChange)="changeSelection(selectedCode)" required>
    <!-- Add mat-select-trigger here start -->
    <mat-select-trigger>
       <img with="10px" height="10px" src="{{code.flag}}">
    </mat-select-trigger>
     <!-- Add mat-select-trigger here end -->
    <mat-option *ngFor="let code of countryCode" [value]="code.calling_code" (keypress)="numberOnly($event)&&phoneNumberValid(registerObj.userForm)">
      <img with="10px" height="10px" src="{{code.flag}}"> {{ code.country }} ({{code.calling_code}})
    </mat-option>
  </mat-select>
</mat-form-field>

And congrats for a very well formed question!!

Upvotes: 2

Related Questions