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
Damian Gemza staff answered 6 years ago
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
The Orange Dev House pro answered 6 years ago
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
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
The Orange Dev House pro answered 6 years ago
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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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