MDB-Select - Cannot use ngFor

sdhakad asked 10 months ago

Is there any scope of using ngFor with mdb-select for the options.

I have a complex object array which has to be rendered in to the options.It would be a tds task to convert that object into the MDBSelectOptions class.

And assume that I have multiple select boxes in the form,it becomes very slow.

Secondly,how can we mark the selected value in the mdb-select while editing a pre-filled form.

Dawid Adach answered 10 months ago

Dear sdhakad,

material select wasn't aimed to be used with ngFor, it's recommended to prepare your data at backend side and pass it to material select options.

As per selecting an option you can use ngModel :


<div class="row">
<mdb-select [options]="dateOptionsSelect" [(ngModel)]="selectedCharacter">
placeholder="Choose your option"></mdb-select>
<label>Example label</label>

.ts: onInit:

dateOptionsSelect = [

{ value: '1', label: 'Today', selected: true },

{ value: '2', label: 'Yesterday' },

{ value: '3', label: 'Last 7 days' },

{ value: '4', label: 'Last 30 days' },

{ value: '5', label: 'Last week' },

{ value: '6', label: 'Last month' }


selectedCharacter = '1';



UoStA_ajdi commented 9 months ago

This solution only works with String value. Can we have the ability for it to work with number and boolean as well?

UoStA_ajdi commented 9 months ago

Modified line 238 in select.component.ts to this

else if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean' )

it is now working as desired. but can this please be added to the next release so we do not lose the changes on update.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No