Angular Material Select - mdb-select

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Angular Material Select - mdb-select

flakine pro asked 7 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 7 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 7 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 7 years ago

Unfortunately, we didn't check such solution so you will have to try yourself.
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
flakine
Pro User
14Support score
2Questions 2Answers
0Snippets likes 0Snippets