Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: mdb-select with an image instead of text

JeroenVunderink premium asked 4 years ago


I would like to know or see an example where I can use mdb-select and the selector contains images. I'm trying to build a simple language selector and would like to know and understand if instead (or in addtion) I can use images in the list

Resources (screenshots, code snippets etc.)

Just to be clear. I copied the basic example and added the "img:' ', ", knowing it doesn't exist. But it's an example that I used to clarity what I WOULD LIKE TO DO, and I am fully aware that it doesn't work like this.

So my question is how I should build a list (like this example below) but than different and working. Thanks in advance.

HTML taken from the Basic example:

TS taken from the basic example: import { Component, OnInit } from '@angular/core';

@Component({ selector: 'basic-material-select-example', templateUrl: 'basic-material-select.html', })

export class BasicMaterialSelectComponent implements OnInit {

optionsSelect: Array; ngOnInit() { this.optionsSelect = [ { value: '1', img:' ', label: 'Netherlands' }, { value: '2', img:' ', label: 'Germany' }, { value: '3', img:' ', label: 'English' }, ]; } }


JeroenVunderink premium commented 4 years ago

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


Arkadiusz Idzikowski staff answered 4 years ago


Please take a look at our 'select with icons' example: https://mdbootstrap.com/docs/angular/forms/select/#e-icons

It is the only way to add an image to an option that we support.



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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.1.0
  • Device: MacBook
  • Browser: Chrome
  • OS: Catalina
  • Provided sample code: No
  • Provided link: No