Angular Material Select - mdb-select - Material Design for Bootstrap

Topic: Angular Material Select - mdb-select

flakine pro asked 6 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?

Add comment

Dawid Adach pro answered 6 years ago

0 0 Best answer

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 6 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 6 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

flakine

Pro User 14Support score
2Questions 2Answers 0Snippets