How Do I Get the Selected Item (Object) of Mdb-select


Topic: How Do I Get the Selected Item (Object) of Mdb-select

The Orange Dev House pro asked 6 years ago

How do I get the selected item (object)? The same object passed in 

(selected)="onSelected($event)".

Damian Gemza staff answered 6 years ago

Dear @The Orange Dev House 

I don't know if I understood you right, but: do you want to achieve something like this?

.html:

<div class="row">
<div class="col-md-6 mx-auto my-5">
<mdb-select [options]="optionsSelect" (selected)="optionSelect($event)" placeholder="Choose your option" label="Example label"></mdb-select>
<p>selected option value: {{selectedOption.value}}, selected option label: {{selectedOption.label}}</p>
</div>
</div>

.ts:

optionsSelect: Array<any>;
selectedOption: any = {value: '', label: ''};
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}

optionSelect(event: any) {
console.log(event);
this.selectedOption = event;
}

Best Regards,

Damian


That does not show what I want. Currently, your sample is setting a module level variable within the handler with the $event object passed in. This is not what I want. 

I want to access the selected item from say a button when it is clicked.

Something like onButtonClicked() {

       const selItem = this.form.get('birth_country_id').selectedItem();

       console.log(selItem );    // Result: {value: 245, label: 'Canada', moreProperty:               'morePropertyValue', ...}

}


The Orange Dev House pro commented 6 years ago

Six hours and no response from your team! And this is a premium account.


Damian Gemza staff answered 6 years ago

Dear @The Orange Dev House 

Please note, that our business hours are 7-18 GMT+1. So only between this hours, you'll get the answer on our Support Forum.

Premium supports got the highest priority in replying.

About your problem: Please check our Select Documentation for Reactive Forms get selected value.

Best Regards,

Damian


I am aware of ways to get the selected value. What I want is the selected 'item'. This should return the corresponding object literal: { value: 1, label, 'America', states: [] }.


Damian Gemza staff answered 6 years ago

Dear @The Orange Dev House 

The (selected) event returns the whole selected object, so in your example: {value: 1, label: 'America'}.

You can bind this value to some variable, and after clicking some button or something else you can return this variable.

I have provided you with two possibilities, how to achieve your desired behavior.

If you want something else, for now, this is not possible.

Best Regards,

Damian


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: 6.2.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No