Flags in an mdb-select component

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

Add comment

Arkadiusz Idzikowski staff answered 1 year ago

0 0 Best answer

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

<a href="https://mdbootstrap.com/docs/b4/angular/forms/select/" target="_blank">https://mdbootstrap.com/docs/b4/angular/forms/select/</a>

Here is an example:

TS:

<pre class="prettyprint"><code> 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' }
 ];
</code></pre>

HTML:

<pre class="prettyprint"><code><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 }}
 
 <img class="option-image rounded-circle" [src]="option.icon" />
 
 </mdb-select-option>
 </mdb-select-2>
</div>
</code></pre>

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

<pre class="prettyprint"><code>.mdb-option-text {
 display: flex;
 justify-content: space-between;
}

.option-image {
 height: 25px;
 width: 25px;
}
</code></pre>

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

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

itay

Pro User 2474Support score
150Questions 196Answers 0Snippets