Topic: Angular Material Select - mdb-select

flakine pro asked 5 years ago

I\'m trying to use the mdb-select using the example below.
<div class=\"row\"> <div class=\"col-md-6\"> <mdb-select [options]=\"optionsSelect\" placeholder=\"Choose your option\"></mdb-select> <label>Example label</label> </div></div>
ngOnInit() { this.optionsSelect = [ { value: \'1\', label: \'Option 1\' }, { value: \'2\', label: \'Option 2\' }, { value: \'3\', label: \'Option 3\' }, ]; }
The problem is my business object does have these same properties (value, label). How can I designate which property will be the value and which to be the label?How can I use:<select> <option *ngFor=\"let option of optionsSelect\" [value]=\"option.value\"> {{option.label} </option></select>While still keeping the theme/style of MDB?  

Dawid Adach pro answered 5 years ago

Dear flakine, I am not sure if I understood you correctly, however, the whole advantage using Angular is that you can easily bind frontend to backend, that's why the easiest way would be to transform your data in your .ts file to match proper structure (array  of value/label) options. Of course value is the value which will be set, while label is the name which will be displayed when dropdown is expanded.

flakine pro commented 5 years ago

You are right, it would be easier, but not practical. My business objects are set, and I don't want to create and map new duplicate objects. The question is "can I use the normal bootstrap select component and apply your css theme?"

Dawid Adach pro commented 5 years ago

Unfortunately, we didn't check such solution so you will have to try yourself.

Please insert min. 20 characters.


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: Yes
  • Provided link: No