Topic: Flags in an mdb-select component
itay
pro
asked 11 months 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
Arkadiusz Idzikowski
staff
answered 11 months ago
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 11 months ago
Can you point me to an example ?
Arkadiusz Idzikowski staff commented 11 months ago
I edited my answer and added an example of select with icons.
itay pro commented 11 months ago
Thanks ! Where can we get country icons ?
Arkadiusz Idzikowski staff commented 11 months ago
We do not have any country icons available in our library. You would need to use external images.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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