Topic: mdb-select-2 Close list on button click
Declan Ward priority asked 4 years ago
Expected behavior Ability to close the select list on clicking a button.
How do I close the select list on clicking the Close button? I can see no method for this. Clicking the form outside the list will close it but that is not an acceptable UI in my case. I would expect something like :
this.roleSelect.close();
this.roleSelect.value; will give me the value
I cannot find this in the Angular documentation.
Actual behavior
Resources (screenshots, code snippets etc.) .ts file:
closeSelect(){
console.log('Selected closed');
}
<mdb-select-2
[formControl]="roleSelect"
name="roleSelect"
id="roleSelect"
[multiple]="true"
placeholder="Choose your option"
label="Roles"
[visibleOptions]="4"
(changed)="rolesValueChanged($event)"
>
<mdb-select-option *ngFor="let option of options"
[value]="option.value">{{ option.label }}
</mdb-select-option>
<!-- <button mdbBtn color="primary" size="sm" block="true">Button</button> -->
<button class="btn-save btn btn-primary btn-sm" (click)="closeSelect()">Close</button>
</mdb-select-2>
Arkadiusz Idzikowski staff answered 4 years ago
Clicking the select overlay closes the dropdown, this is expected behavior. You can also close the component programmatically using close
method in your ts file.
If you use reactive forms, you can subscribe to valueChanges
of the form control to receive information about selected values:
this.roleSelect.valueChanges.subscribe((value) => console.log(value));
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: Desktop
- Browser: Firefox Dev
- OS: Windows 10
- Provided sample code: No
- Provided link: No