Topic: MDB-Select - Cannot use ngFor

sdhakad pro asked 5 years 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 pro answered 5 years 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';

University of St Andrews pro commented 5 years ago

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

University of St Andrews pro commented 5 years 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.


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



Specification of the issue

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