Custom object for mdb-select

web
mobile

Topic: Custom object for mdb-select

react123 pro premium asked 11 months ago

I want to set my object.id as value and object.name as label to mdb-select in angular. So how to use mdb-select to set this type customization.

Angular code:

<select [(ngModel)]="_processId" id="process" name="process" >
            <option value="" disabled selected>>select a process</option>
            <option *ngFor="let item of processList" [value]="item.id">{{item.processName}}</option>
          </select>

Arkadiusz Idzikowski staff answered 11 months ago

It's not possible in the current version. You need to use object with value and label parameters as explained in the documentation.

We have plans to change this approach, but this will require some breaking changes and we don't want to introduce them before next major update.


aathithan pro premium answered 10 months ago

Hey,

I need an object that has been selected (more than a primitive value). Is there any workaround to do so? Please suggest.


Arkadiusz Idzikowski staff answered 10 months ago

Hello,

You need to use selected output. Please take a look at the API section of the select component (you need to switch tab at the top of the documentation page).


DMann pro premium answered 7 months ago

Any update on this? Is there an ETA for delivering the change away from requiring {label:string, value:string}?

Thanks.


Arkadiusz Idzikowski staff answered 7 months ago

There is no ETA for such feature. To change the way we pass options to mdb-select component we would need to completely rewrite the components code.


DMann pro premium commented 7 months ago

I realize it's not trivial, but it's a pretty big deal to not be able to use our objects as-is. By forcing us to use {label:string, value:string}, it breaks every single one of the objects I want to reference in the select. I either need to change my interfaces/objects to properties that don't fit in with everything else in my app, or else dynamically generate new objects every time I render a select. Please consider bumping this up on the priority list if possible.

Thanks.


1001albertpadilla commented 7 months ago

As a regular user, I addressed this problem by creating transient value and label fields in my objects. Small and harmless workaround. Works fine for me.


Arkadiusz Idzikowski staff commented 7 months ago

@DMann
This is already on our high priority list, but we cannot change this overnight, because many people use the current version of the component in their projects. There are also some problems in the approach where options are added in new components and we need to fix them first.


Buie pro commented 2 months ago

Any updates on this? This is frustrating to work around.


Arkadiusz Idzikowski staff commented 2 months ago

The new version of the component will be released at the earliest in new major release (when Angular 10 will be available).


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.5.4
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No