Topic: Flags in an mdb-select component

itay pro asked 1 year ago


Hi,

How can I add small flags to an mdb-select component when the list dropdown is showing list of currencies and I want to show the flag of the country next to the currency name ?

Thanks



In version 9.3.0 we added new component called mdb-select-2. This version of the select allows you to add options in the form of a mdb-select-option component so you can easily use your custom template to render them.

https://mdbootstrap.com/docs/b4/angular/forms/select/

Here is an example:

TS:

  options = [
    { value: '1', label: 'One', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp' },
    { value: '2', label: 'Two', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp' }
  ];

HTML:

<div class="md-form">
  <mdb-select-2 placeholder="Choose your option" label="Example label">
    <mdb-select-option *ngFor="let option of options" [value]="option.value"
      >{{ option.label }}
      <span class="option-image-container">
        <img class="option-image rounded-circle" [src]="option.icon" />
      </span>
    </mdb-select-option>
  </mdb-select-2>
</div>

Additional CSS for image styles and position (styles.scss):

.mdb-option-text {
  display: flex;
  justify-content: space-between;
}

.option-image {
  height: 25px;
  width: 25px;
}

itay pro commented 1 year ago

Can you point me to an example ?


Arkadiusz Idzikowski staff commented 1 year ago

I edited my answer and added an example of select with icons.


itay pro commented 1 year ago

Thanks ! Where can we get country icons ?


Arkadiusz Idzikowski staff commented 1 year ago

We do not have any country icons available in our library. You would need to use external images.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 9.3.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No